What is a CSS preprocessor?
A CSS preprocessor is a tool that extends the capabilities of ordinary CSS by adding variables, functions, calculations, selector nesting, and other "programming" features. The preprocessor then compiles its own code into ordinary CSS that browsers understand.
Why it's needed
- simplifies maintaining large CSS files
- allows code reuse
- helps write styles faster and in a more structured way
What is added on top of ordinary CSS
| Feature | Example |
|---|---|
| variables | @color: #333; |
| nesting | selectors inside selectors |
| mixins | reusable blocks of code |
| functions | calculations (100% - 20px) |
| imports | splitting styles into modules |
Popular preprocessors
- Sass (SCSS)
- LESS
- Stylus
Sass/SCSS is used most often, it's the de facto standard.
Example (SCSS → CSS)
SCSS:
scss
$main: #3498db;
button {
color: $main;
&:hover {
color: darken($main, 10%);
}
}Compiled CSS:
css
button {
color: #3498db;
}
button:hover {
color: #2b7cad;
}Summary: a preprocessor is a layer on top of CSS that makes the code more convenient and powerful, but ultimately still turns into standard CSS that the browser executes.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.