Suggest an editImprove this articleRefine the answer for “What does a preprocessor do during compilation?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**During compilation, a preprocessor** converts its extended syntax (variables, nesting, mixins, functions and so on) into plain, valid CSS that the browser understands. **Key point:** as a result of these steps, the output is a plain CSS file with no extra constructs, while the source code in Sass, LESS or Stylus stays convenient only for the developer.Shown above the full answer for quick recall.Answer (EN)ImageDuring 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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.