SASS Variables vs CSS Custom Properties

SASS variables and CSS custom properties (CSS variables) are both ways to store reusable values, but they work at completely different stages. SASS variables are resolved at compile time: by the time the browser receives the CSS, all `$variable` references have been replaced by their literal values. The browser never sees a SASS variable — it only sees the resulting CSS. CSS custom properties (declared as `--variable-name: value`) are part of the CSS cascade and are resolved at runtime in the browser. They can be changed via JavaScript, they respect inheritance, they can be redefined inside media queries or for specific elements, and they are accessible from within `calc()` expressions. These capabilities make CSS custom properties ideal for theming, dark mode switching, and runtime dynamic changes. A common best-practice pattern is to use both together: define SASS variables as the authoritative source of your design tokens, then output them as CSS custom properties in a `:root` block. This way you get the power of CSS custom properties at runtime while keeping your design token definitions clean and centrally managed in SASS.

Example

// ── Using SASS variables to generate CSS custom properties ────────────────────

// _variables.scss — SASS-side design tokens
$color-primary   : #3498db;
$color-secondary : #2ecc71;
$color-dark      : #2c3e50;
$font-size-base  : 16px;
$space-md        : 1rem;

// _root.scss — expose tokens as CSS custom properties
:root {
    --color-primary   : #{$color-primary};
    --color-secondary : #{$color-secondary};
    --color-dark      : #{$color-dark};
    --font-size-base  : #{$font-size-base};
    --space-md        : #{$space-md};
}

// Dark-mode override using CSS custom properties (not possible with SASS vars)
[data-theme="dark"] {
    --color-primary : #5dade2;
    --color-dark    : #ecf0f1;
}

// Component uses CSS custom properties so it reacts to dark mode at runtime
.card {
    color      : var(--color-dark);
    background : var(--color-primary);
    padding    : var(--space-md);
    font-size  : var(--font-size-base);
}

// SASS variable can NOT do this — it is resolved at compile time:
// .card { color: #2c3e50; }  ← baked in, dark mode would have no effect

HTML

Full Editor

Related Resources

SASS / SCSS Reference

Complete tag & property list

SASS / SCSS How-To Guides

Step-by-step practical guides

SASS / SCSS Exercises

Practice what you've learned