Hvad er CSS-brugerdefinerede egenskaber (variabler)?

Question

Accepted Answer

**CSS-brugerdefinerede egenskaber** (variabler) lader dig gemme værdier én gang og genbruge dem. I modsætning til preprocessor-variabler (Sass) er de **live ved runtime** — de kaskaderer, nedarves og kan ændres med JavaScript eller mediespørgsmål.

```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-værdier

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

## De kaskaderer og kan omfanges/overskrives

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

Fordi de nedarves, er en variabel indstillet på en forælder tilgængelig for alle efterkommere og kan overskrives i et undertræ — noget som Sass-variabler (som bliver kompileret) ikke kan gøre.

## Killer-funktionen: runtime-temaer

```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); }
```

Skift et helt tema ved at omdefinere en håndfuld variabler — ingen duplikerede regler. Du kan også gøre det i JS:

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

Dette opdaterer øjeblikkeligt hvert element, der bruger denne variabel — umuligt med kompilerede Sass-variabler.

## Hvorfor det betyder noget

CSS-variabler er grundlaget for moderne **temaer og design tokens**: definer farver/afstand én gang, genbrug overalt og skift temaer (mørk tilstand, brand-varianter) ved runtime via mediespørgsmål eller JavaScript.

De bringer DRY og dynamiske værdier til almindelig CSS — ingen build-trin krævet.