Why Use a Preprocessor
See the concrete problems Sass solves that plain CSS cannot.
Modern CSS has custom properties (--var) and nesting, but a preprocessor still offers things CSS cannot do at author time.
What Sass gives you
- Variables with logic — do math on them, loop over them, pass them to functions.
- Mixins — reusable, parameterized blocks of declarations.
- Functions — compute values with real return values.
- Modules — split styles into files and share them with clear namespaces.
- Control flow —
@if,@each,@for,@whileto generate CSS programmatically.
All of this runs at build time, so the browser only ever sees clean, static CSS with no runtime cost.
Example
// Generate 5 spacing utility classes with a loop
@for $i from 1 through 5 {
.m-#{$i} { margin: #{$i * 4}px; }
}
/* Compiles to:
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }
.m-4 { margin: 16px; }
.m-5 { margin: 20px; }
*/When to use it
- A developer eliminates 200 lines of duplicate media-query boilerplate by using a single Sass mixin called with different breakpoint values.
- A team uses Sass partials to split a 3000-line stylesheet into focused files per feature, then imports them into one compiled output.
- A designer changes every shade of a brand palette in one Sass map and the entire site's colors update in a single recompile.
More examples
Variables fix magic number sprawl
A single spacing unit variable drives all component padding so changing 8px to 10px updates the entire design at once.
$spacing-unit: 8px;
.card { padding: $spacing-unit * 2; }
.button { padding: $spacing-unit $spacing-unit * 2; }
.input { margin-bottom: $spacing-unit; }Mixin removes vendor-prefix repetition
One mixin wraps the vendor-prefixed transition property so all consumers stay DRY as browser requirements evolve.
@mixin transition($props) {
-webkit-transition: $props;
transition: $props;
}
.link { @include transition(color 0.2s ease); }
.overlay { @include transition(opacity 0.3s ease); }Loops generate utility classes
A single @each loop generates ten margin utility classes that would require 20 hand-written lines of plain CSS.
$sizes: 1, 2, 3, 4, 5;
@each $n in $sizes {
.mt-#{$n} { margin-top: #{$n * 4}px; }
.mb-#{$n} { margin-bottom: #{$n * 4}px; }
}
Discussion