🎨 HTML / CSS Intermediate

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.