1
HTML/CSSAdvanced#css#sass
HTML/CSSIntermediate#css#sass#preprocessors
What are CSS preprocessors and what problems do they solve?
Preprocessors like Sass/SCSS and LESS extend CSS with variables, nesting, mixins, functions, and partials/imports that compile down to plain CSS. They reduce repetition and improve maintainability, though native CSS variables and nesting have closed some of the gap.
Example
// SCSS
$primary: #2563eb;
@mixin flex-center { display: flex; justify-content: center; align-items: center; }
.button {
background: $primary;
&:hover { background: darken($primary, 10%); }
@include flex-center;
}