CSSMedium

How do CSS custom properties differ from SCSS variables?

By FrontendPro Editorial Team Updated 8/14/2026

#css#variables#theming

Answer

Custom properties live at runtime and inherit through the DOM; SCSS variables are substituted at compile time.

css

:root { --accent: #2563eb; --space: 8px; }
[data-theme="dark"] { --accent: #60a5fa; }

.btn { background: var(--accent); padding: calc(var(--space) * 2); }

js

el.style.setProperty("--accent", "#e11d48"); // instant retheme, no rebuild

The key difference: redefining --accent on a DOM subtree updates every descendant that reads it - SCSS can't do that. Use @property to type a variable and make it animatable.

CSS