What is a CSS pre-processor?
basics of authoring tooling.
a pre-processor adds variables, nesting, mixins, functions, and partials, compiling its own syntax into plain CSS for the browser.
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.
The full answer
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.
The mistakes people make
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.
What usually comes next
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?
A 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.
Interview question
What is true of a CSS pre-processor like Sass?
- a.It replaces the need for any CSS output
- b.Its variables update live in the browser like custom properties
- c.It compiles its extended syntax into plain CSS at build timeCorrect
- d.Browsers parse and execute Sass syntax directly
Why? this is the answer
A pre-processor compiles extended syntax to standard CSS during the build; browsers only ever run the output. Browsers never parse Sass directly, and Sass variables resolve at compile time rather than updating live.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles