Vad är CSS-anpassade egenskaper (variabler)?

Question

Accepted Answer

**CSS-anpassade egenskaper** (variabler) låter dig lagra värden en gång och återanvända dem. Till skillnad från preprocessor-variabler (Sass) är de **aktiva vid körning** — de kaskaderar, ärver och kan ändras med JavaScript eller mediefrågor.

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

## Reservvärden

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

## De kaskaderar och kan begränsas/åsidosättas

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

Eftersom de ärver är en variabel inställd på en förälder tillgänglig för alla efterkommande och kan åsidosättas på ett underträd — något som Sass-variabler (som kompileras bort) inte kan göra.

## Huvudfunktionen: körningstidstematisering

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

Byt ett helt tema genom att omdefiera några få variabler — inga duplicerade regler. Du kan också göra det i JS:

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

Detta uppdaterar omedelbar alla element som använder denna variabel — omöjligt med kompilerade Sass-variabler.

## Varför det är viktigt

CSS-variabler är grunden för modern **tematisering och designmarkörer**: definiera färger/mellanrum en gång, återanvänd överallt och byt teman (mörkt läge, variantbrand) vid körning via mediefrågor eller JavaScript.

De för DRY och dynamiska värden till vanligt CSS — ingen byggsteg krävs.