What are the advantages of preprocessors over plain CSS?

The main advantages of preprocessors over plain CSS come down to extending the language's capabilities and making development more efficient:

#1. Variables

Let you store repeating values (colors, sizes, fonts) in one place and change them centrally. In plain CSS this capability appeared late and in a more limited form.

#2. Nested selectors

Preprocessors let you write styles in a logical tree structure that matches the markup. In CSS you have to manually write out long cascading selectors, which is harder to read.

#3. Mixins and functions

You can describe a repeating style once (for example, a complex box-shadow or a set of flex properties) and reuse it. This reduces copy-pasting and lowers the chance of errors.

#4. Import and code structuring

A project can be split into modules and conveniently assembled into a single file. In plain CSS @import is inconvenient and affects performance, while preprocessors can assemble the structure at compile time.

#5. Operations and calculations

Support for mathematical expressions right inside the styles (for example, dividing widths, calculating spacing, changing a color's brightness). In CSS such things have to be worked out manually.

#6. Improved readability and maintainability

The code ends up more compact, more logical and easier to maintain in large projects, especially with a team.

---

In the end, preprocessors solve problems of scalability, repetition and order in styles that plain CSS either lacks or implements more weakly.