What are the advantages/disadvantages of using CSS preprocessors?

TL;DR

CSS preprocessors such as Sass and Less add build-time modules, variables, mixins, functions, and control flow. They can remove repetition and generate consistent CSS, but they add a compiler, another language to learn, source-map and debugging concerns, and the risk of producing much more CSS than the source suggests. Native custom properties, nesting, calculations, and cascade layers now cover some former use cases, so adopt a preprocessor for a concrete remaining need.

What are the advantages/disadvantages of using CSS preprocessors?

Advantages

Build-time abstraction: Mixins and functions can express repeated patterns that plain declarations would duplicate.
Structured source files: A module system can split a large stylesheet into focused files while producing an intentional set of deployable CSS assets.
Compile-time data and logic: Maps, loops, and conditionals can generate design-token utilities or a family of related selectors.
Mature tooling: Established preprocessors provide diagnostics, package ecosystems, and source maps.

For example, a Sass mixin named focus-ring($color) can emit the same focus declarations wherever it is included. This removes source repetition, but every inclusion still adds declarations to the compiled CSS, so inspect the output rather than assuming the abstraction is free.

A Sass variable exists only while compiling. By contrast, a CSS custom property remains in the browser and can change at runtime through the cascade:

:root {
  --focus-color: Highlight;
}

.button:focus-visible {
  outline: 0.2rem solid var(--focus-color);
  outline-offset: 0.2rem;
}

Disadvantages

Build dependency: Development, production, and any consuming package must use a compatible compiler and configuration.
Abstraction cost: Deep nesting, inheritance helpers, and clever loops can hide the emitted selectors and their specificity.
Output growth: A small loop or repeated mixin call can generate a large stylesheet. The compiled output, not source-line count, determines transfer and browser work.
Debugging indirection: Source maps help, but DevTools ultimately applies the generated CSS.
Language overlap: Native CSS evolves independently. A preprocessor feature with similar syntax may have different semantics from the eventual platform feature.

When to use one

Use a preprocessor when its build-time capabilities materially simplify an existing codebase or token pipeline. Prefer native CSS when runtime theming, inheritance, browser-computed values, or direct platform interoperability matters. Many projects use both—for example, Sass modules to organize files and CSS custom properties for runtime themes.

Before adding a preprocessor to a new project, compare the requirement with native custom properties, nesting, calc(), cascade layers, and the existing bundler's file handling. If plain CSS already expresses the design clearly, another compilation layer may not pay for itself.

Exercises

Beta

What are the advantages/disadvantages of using CSS preprocessors?

TL;DR