Detailed explanation
CSS preprocessors are tools that let developers write styles in an extended language and compile them into ordinary CSS that browsers understand. Popular examples include Sass and Less; SCSS is the CSS-compatible syntax of Sass, while its alternative indented syntax uses indentation instead of braces. Preprocessors help organise large stylesheets and express reusable styling logic. They do not replace the CSS cascade, specificity rules, or layout algorithms: those still determine how the generated CSS behaves in the browser.
Their main features include variables, nesting, mixins, functions, and reusable modules or partials. Variables give repeated values, such as colours and spacing, meaningful names. Nesting groups related selectors, with & referring to the parent selector. Mixins insert reusable groups of declarations, optionally accepting arguments, while functions calculate and return values. Splitting styles into focused files makes component ownership and shared design values easier to manage. In modern Sass, @use and @forward provide the module system; the older Sass @import mechanism is deprecated.
Under the hood, a compiler resolves variables and module dependencies, evaluates expressions and functions, expands mixins, and transforms nested selectors into browser-readable rules. In the supplied example, $primary becomes a literal colour, @include flex-center inserts three flexbox declarations, and &:hover produces a .button:hover selector. The colour adjustment is computed during compilation, not on hover; hovering only activates the resulting rule. The example’s global darken() call is deprecated in modern Sass; sass:color with color.adjust($primary, $lightness: -10%) is the modern equivalent. Compilation usually runs through a build tool or a command-line watcher, with source maps helping trace generated rules back to their source.
The practical benefits are reduced duplication, consistent values, and easier maintenance, but the trade-offs include build configuration and potentially bloated or overly specific output. Native CSS custom properties and nesting now cover some overlapping needs. Unlike Sass variables, custom properties participate in the cascade and can change at runtime, making them useful for themes. Interviewers generally look for this distinction, a concrete reuse example, and awareness that deep nesting or excessive mixin expansion can make the final CSS harder to maintain.
Key points to remember
- Sass/SCSS and Less compile extended styling syntax into plain CSS.
- Variables, mixins, functions, nesting, and modules support reuse and organisation.
- Preprocessor logic runs at build time; browsers execute only the generated CSS.
- Native custom properties support cascading and runtime changes, unlike Sass variables.
- Inspect generated CSS to control duplication, selector specificity, and output size.
Common mistakes candidates make
- Claiming browsers directly understand SCSS or Less source files.
- Treating preprocessor variables and CSS custom properties as interchangeable.
- Nesting selectors to mirror the entire DOM, creating unnecessary specificity and structural coupling.
Likely follow-up questions
What is the difference between Sass and SCSS?
Sass is the preprocessor, and SCSS is one of its two syntaxes. SCSS uses CSS-style braces and semicolons, while the indented Sass syntax uses indentation and usually has a .sass extension.
When should you use CSS custom properties instead of Sass variables?
Use custom properties when values need to vary through the cascade, component scopes, or runtime theme changes. Use Sass variables for compile-time configuration and calculations; both can coexist in one project.
How does a mixin differ from a function?
A mixin inserts reusable styling rules or declarations where it is included. A function returns a value for use in an expression, such as calculating spacing or adjusting a colour.
Interview tip: Start with the compile-to-CSS definition, explain the supplied button example, and finish with the build-time versus runtime distinction.