CSS custom properties versus Sass for theming
runtime versus build-time variables.
custom properties are live and cascade for dynamic switching; Sass variables compile away.
claiming Sass variables can change theme at runtime without recompiling.
What's really being asked
The interviewer checks whether you understand the fundamental timing difference: Sass runs before the browser, CSS custom properties run in the browser. That distinction decides which fits dynamic theming.
The full answer
Explain that Sass variables are resolved at compile time. They are excellent for authoring conveniences, loops, mixins, and arithmetic, but they do not exist in the shipped CSS, so you cannot change them at runtime; switching themes would require recompiling and reloading stylesheets. CSS custom properties live in the cascade at runtime: they inherit, can be scoped to selectors, can be read and written by JavaScript, and recalculate instantly when changed. That makes them the right tool for dynamic theme switching like light and dark mode or per-user themes. They also work with calc for math. The mature approach uses Sass for build-time structure and custom properties for the values that must change at runtime.
The mistakes people make
Saying Sass variables can be swapped to change theme live, which is impossible since they are gone after compilation. Claiming custom properties cannot do calculations. Treating the two as mutually exclusive rather than complementary.
What usually comes next
What are the browser support and performance characteristics of custom properties? How do you do math with custom properties? When would you still reach for Sass in 2026?
A concrete example
With Sass you write $primary: #0A74FF and it bakes that color into the output, so a dark mode would need a second compiled file. With custom properties you write --primary: #0A74FF on :root and override it under [data-theme=dark]; a single line of JavaScript toggling the attribute switches the entire theme instantly, no recompile, no reload.
Interview question
What is the decisive difference making CSS custom properties better suited to runtime theme switching than Sass variables?
- a.Custom properties live in the cascade at runtime; Sass variables are resolved away at compile timeCorrect
- b.Custom properties cannot be read by JavaScript, making them more secure
- c.Sass variables inherit through the DOM while custom properties do not
- d.Sass supports calc() but custom properties do not
Why? this is the answer
Sass resolves before the browser runs, so its variables cannot change live, whereas custom properties exist in the cascade and update instantly. The inheritance, JavaScript, and calc claims are reversed or false.
Just read this? Test yourself on what you have been reading.
Read the original → css-tricks.com
- #design-systems
- #css
- #sass
- #css-custom-properties
- #theming
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 design-systems — each one lists the topics its interview covers.
See open roles