What are CSS preprocessors (Sass/Less) and what do they add?
Answer
CSS preprocessors extend CSS with programming features not available in plain CSS. They compile down to standard CSS. Sass (SCSS syntax) is the most popular and adds: Variables ($primary-color: blue), Nesting (write selectors nested like HTML structure), Mixins (reusable style blocks, like functions), Functions (for calculations), Extend/Inheritance (share rules between selectors), and Partials (split CSS into multiple files and import them). Less is similar but uses a different syntax and runs in the browser or Node. Since CSS now has custom properties and nesting (in modern browsers), the advantage of preprocessors has narrowed, but Sass is still widely used in large projects.
Previous
What is the difference between display:none, visibility:hidden, and opacity:0?
Next
What are srcset and sizes attributes for responsive images?
More HTML / CSS Questions
View all →- Intermediate How does the CSS cascade work?
- Intermediate What is BEM (Block Element Modifier) methodology in CSS?
- Intermediate What are CSS custom properties (CSS variables)?
- Intermediate What is the difference between em, rem, px, vh, and vw units in CSS?
- Intermediate How does Flexbox differ from CSS Grid? When would you use each?