How does a postprocessor differ from a preprocessor (SASS/LESS)?
A postprocessor and a preprocessor solve different tasks and work at different stages of CSS processing.
1. When it works
| Tool | When it is applied |
|---|---|
| Preprocessor (SASS/LESS) | before CSS exists: the code does not exist yet, it is only being generated |
| Postprocessor | after CSS exists: processing is applied to existing CSS |
2. Main goal
| Tool | What it is for |
|---|---|
| Preprocessor | adding new capabilities (variables, nesting, mixins, functions) and simplifying writing styles |
| Postprocessor | improving finished CSS for production (cross-browser support, minification, optimization) |
3. Type of changes
| Tool | What it does |
|---|---|
| Preprocessor | generates CSS based on extended syntax |
| Postprocessor | modifies CSS that already exists, but does not extend the language |
4. Typical tasks
Preprocessor:
- variables, nesting, mixins, functions
- a modular style structure
- reduced duplication
- development convenience
Postprocessor:
- adding vendor prefixes (for example,
-webkit-) - minification
- optimizing the final file
- supporting new CSS features before browsers adopt them (via plugins)
5. Examples
| Type | Tools |
|---|---|
| Preprocessor | Sass, LESS, Stylus |
| Postprocessor | PostCSS with plugins (Autoprefixer, cssnano) |
Summary
A preprocessor is about comfort and convenience when writing code. A postprocessor is about the quality of the finished CSS in production.
They are often used together: SASS first generates the CSS, then PostCSS improves it before publishing.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.