CodePark/ questions / Modern CSS
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Modern CSS

How do CSS custom properties differ from Sass or Less variables?

:root { --brand: #0055ff; }
.dark { --brand: #6699ff; }
.button { background: var(--brand, blue); }

Sass and Less variables disappear at build time, while custom properties stay live in the browser.

Preprocessor variables are replaced when the CSS is built. The output CSS contains only the final values. So they can't change at runtime, and they can't depend on where an element sits in the DOM.

Custom properties (--name) are real CSS properties that live in the browser:

  • They cascade and inherit. Redefining --brand on .dark changes it for that whole subtree, which makes theming and dark mode easy.
  • You can change them in media queries, or from JavaScript with style.setProperty().
  • var() takes a fallback, like var(--brand, blue).
  • @property can register a type for one, which allows animating it.

Preprocessors still offer things custom properties don't, such as mixins, loops, and using a variable in a media query condition. The two are often used together.

  • Sass variables are compiled away at build time.
  • Custom properties are live, and they cascade and inherit.
  • They allow scoped themes and runtime updates from JavaScript or media queries.
  • Custom properties can't be used inside media query conditions.