CSS Custom Properties and Sass Variables

Introduction

Sass variables and CSS custom properties both store values for reuse. They look similar, but they work at different times.

• Sass variables ($color) are resolved when you compile SCSS to CSS.
• CSS custom properties (--color) live in the browser and can change at runtime.

Use both when it helps. Keep the choice simple.

Sass variables

Great for build-time values: colors, spacing, fonts, and calculations that never need to change in the browser.

$primary: #3498db;
$space: 16px;

.button {
  background: $primary;
  padding: $space;
}

After compile, the CSS only has the final values. There is no $primary left in the browser.

CSS custom properties

Great for values you may change later (theme switch, user preference, JavaScript updates).

:root {
  --primary: #3498db;
  --space: 16px;
}

.button {
  background: var(--primary);
  padding: var(--space);
}

Update them with a class or with JS:

[data-theme="dark"] {
  --primary: #5dade2;
}

document.documentElement.style.setProperty("--primary", "#e74c3c");

Simple rule of thumb

| Use | Prefer | | --- | --- | | Static tokens (design system defaults) | Sass variables | | Themes, dark mode, runtime tweaks | CSS custom properties | | Mix of both | Sass for defaults, CSS vars for what must stay flexible |

Using them together

You can define Sass values once, then expose them as CSS variables:

$primary: #3498db;

:root {
  --primary: #{$primary};
}

.card {
  border-color: var(--primary);
}

You keep one source of truth in Sass, and still get runtime flexibility in the browser.

Sass variables are for compile-time consistency. CSS custom properties are for live, dynamic styling. Start with Sass for fixed tokens, and switch to CSS variables when the value needs to change after the page loads.