CSS Pre‑processors – Sass & Less

Pre‑processors add variables, nesting, mixins, and functions.

• Sass syntax (.scss):

$primary:#0066cc;
.btn { background:$primary; &:hover { background:darken($primary,10%); } }

• Less is similar but uses @ for variables.
• Compile with npm scripts, Webpack, Gulp, or Parcel.

---

Example: Simple Sass partials

// _variables.scss
$font-stack: 'Roboto', sans-serif;
$spacing: 1rem;

// _buttons.scss
@use 'variables' as *;
.button { font-family:$font-stack; padding:$spacing; }

Compile to style.css for production.