What does a preprocessor do during compilation?

During compilation, a preprocessor converts its extended syntax (variables, nesting, mixins, functions and so on) into plain, valid CSS that the browser understands. Essentially, it performs several operations:

#1. Unrolls nested selectors

Turns the tree of nested rules into the familiar cascading records that CSS understands.

#2. Substitutes variables

Replaces variable names with their values and removes the declarations themselves.

#3. Unrolls mixins and functions

Inserts into the final CSS all the code described in mixins or computed by functions.

#4. Calculates operations

Evaluates mathematical expressions right during compilation (for example, 100% / 3 → 33.3333%).

#5. Assembles files into one final CSS

Processes the preprocessor's imports and merges the modules into a single resulting file.

---

The result of these steps is a plain CSS file, with no extra constructs. That is what gets linked into the browser, while the source code in Sass, LESS or Stylus stays convenient only for the developer.