Mitä ovat CSS:n mukautetut ominaisuudet (muuttujat)?

Question

Accepted Answer

**CSS:n mukautetut ominaisuudet** (muuttujat) antavat sinulle mahdollisuuden tallentaa arvot kerran ja käyttää niitä uudelleen. Toisin kuin esiprosessorin (Sass) muuttujat, ne ovat **aktiivisia ajonaikana** — ne kaskadoituvat, periytyivät ja niitä voidaan muuttaa JavaScriptillä tai mediakyselyillä.

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

## Varaarvot

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

## Ne kaskadoituvat ja niitä voidaan asettaa/ohittaa

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

Koska ne peritään, vanhempisolmussa määritetty muuttuja on saatavilla kaikille jälkeläisille ja se voidaan ohittaa alipuussa — jotain mitä Sass-muuttujat (jotka käännetään) eivät voi tehdä.

## Nirvana-ominaisuus: ajonaikaisten teemojen käyttö

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

Vaihda kokonainen teema määrittelemällä muutama muuttuja uudelleen — ilman kaksinkertaisia sääntöjä. Voit tehdä sen myös JS:ssä:

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

Tämä päivittää välittömästi jokaisen elementin, joka käyttää tätä muuttujaa — mahdotonta käännettyjen Sass-muuttujien kanssa.

## Miksi sillä on väliä

CSS-muuttujat ovat modernen **teemoituksen ja design-tokeneiden** perusta: määritä värit ja välilyönnit kerran, käytä niitä uudelleen kaikkialla ja vaihda teemoja (pimeä tila, tuotemerkin muunnelmat) ajonaikana mediakyselyjen tai JavaScriptin avulla.

Ne tuovat DRY-periaatteen ja dynaamiset arvot tavalliseen CSS:ään — ilman rakentamisvaiheita.