znazz75.de

CSS Variables vs Sass Variables: Key Differences

Claude

Both are called “variables,” but CSS custom properties and Sass variables work at completely different times, and mixing up their capabilities leads to real confusion.

// Sass variable: resolved at COMPILE time, becomes a static value in the output CSS
$primary-color: #3858e9;
.button { background: $primary-color; }
// compiles to: .button { background: #3858e9; }

/* CSS custom property: resolved at RUNTIME, in the browser */
:root { --primary-color: #3858e9; }
.button { background: var(--primary-color); }
/* Stays as var(--primary-color) in the actual CSS -
   can be changed live with JavaScript or media queries */

The Practical Difference

Sass variables can’t be changed after compilation — they’re baked into static CSS. CSS custom properties are live values the browser resolves on every paint, so JavaScript can change document.documentElement.style.setProperty('--primary-color', newValue) and see it update instantly, something no compile-time Sass variable can ever do.

, ,

Recommended

Categories