What is a CSS pre-processor?

WHY THIS QUESTION This checks whether you understand the difference between authoring conveniences and what the browser actually runs. A pre-processor is a build-time tool, and recognizing that boundary is foundational.

A GOOD ANSWER COVERS A CSS pre-processor is a tool that lets you write stylesheets in an extended language, such as Sass, Less, or Stylus, which is then compiled into plain CSS that browsers can read. The browser never understands the pre-processor syntax directly; compilation happens during the build. The main benefits are features that plain CSS historically lacked or handles less ergonomically: variables for reusable values, nesting to mirror structure, mixins to reuse blocks of declarations, functions and operators for computed values, loops and conditionals for generating repetitive rules, and partials with imports to split styles into maintainable files compiled into one. The net effect is less repetition, better organization, and easier maintenance on large codebases.

COMMON WRONG ANSWERS Saying browsers execute Sass at runtime. Confusing Sass variables, which are resolved at compile time, with CSS custom properties, which live in the browser. Claiming pre-processors improve runtime performance directly; they mainly improve authoring, and output performance depends on the generated CSS.

LIKELY FOLLOW-UPS How does a Sass variable differ from a CSS custom property? What is the difference between a mixin and a function? Why use partials? How do pre-processors fit into a build pipeline with tools like PostCSS?

ONE CONCRETE EXAMPLE In Sass you define a brand color variable once and a mixin for a button base, then split styles into partials like buttons and forms imported into one main file. The compiler resolves the variables and mixins and concatenates the partials into a single CSS file the browser downloads, so you author with structure and ship plain CSS.