What are CSS custom properties (variables)?

Question

Accepted Answer

**CSS custom properties** (variables) let you store values once and reuse them. Unlike preprocessor (Sass) variables, they're **live at runtime** — they cascade, inherit, and can be changed with JavaScript or media queries.

```css
:root {                 /* :root = the html element → global scope */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* use with var() */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## Fallback values

```css
color: var(--text-color, black); /* use black if --text-color isn't defined */
```

## They cascade and can be scoped/overridden

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
```

Because they inherit, a variable set on a parent is available to all descendants and can be overridden on a subtree — something Sass variables (which are compiled away) can't do.

## The killer feature: runtime theming

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* redefine the SAME vars for dark mode */
}
body { background: var(--bg); color: var(--text); }
```

Switch an entire theme by redefining a handful of variables — no duplicated rules. You can also do it in JS:

```js
document.documentElement.style.setProperty("--color-primary", "#e11d48");
```

This instantly updates every element using that variable — impossible with compiled Sass variables.

## Why it matters

CSS variables are the foundation of modern **theming and design tokens**: define colors/spacing once, reuse everywhere, and switch themes (dark mode, brand variants) at runtime via media queries or JavaScript.

They bring DRY, dynamic values to plain CSS — no build step required.