Hva er CSS custom properties (variabler)?

Question

Accepted Answer

**CSS custom properties** (variabler) lar deg lagre verdier en gang og gjenbruke dem. I motsetning til preprocessor (Sass) variabler er de **aktive under runtime** — de flyter ned, arves, og kan endres med JavaScript eller 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 */
```

## De flyter ned og kan omfangs-defineres/overstyres

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

Fordi de arves, er en variabel satt på en forelder tilgjengelig for alle etterkommere og kan overstyres på et deltre — noe Sass variabler (som kompileres bort) ikke kan gjøre.

## Killer-funksjonen: 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); }
```

Bytt ut et helt tema ved å omdefinere en håndfull variabler — ingen dupliserte regler. Du kan også gjøre det i JS:

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

Dette oppdaterer umiddelbart hvert element som bruker den variabelen — umulig med kompilerte Sass variabler.

## Hvorfor det betyr noe

CSS variabler er grunnlaget for moderne **theming og design tokens**: definer farger/mellomrom en gang, gjenbruk overalt, og bytt temaer (dark mode, merkevariantter) under runtime via media queries eller JavaScript.

De bringer DRY, dynamiske verdier til plain CSS — ingen byggesteg nødvendig.