Što su CSS prilagođena svojstva (varijable)?

Question

Accepted Answer

**CSS prilagođena svojstva** (varijable) omogućuju vam da jednom pohranite vrijednosti i ponovno ih koristite. Za razliku od varijabli pretprocesora (Sass), ona su **živa tijekom izvršavanja** — kaskadiraju se, nasljeđuju se, i mogu se promijeniti s JavaScriptom ili media upitima.

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

## Rezervne vrijednosti

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

## Kaskadiraju se i mogu biti opsežna/prepisana

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

Jer se nasljeđuju, varijabla postavljena na roditeljskom elementu dostupna je svim potomcima i može biti prepisana na podstablu — nešto što Sass varijable (koje se kompajliraju) ne mogu učiniti.

## Ubojita mogućnost: tematizacija tijekom izvršavanja

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

Promijenit cijelu temu predefinirajući nekoliko varijabli — bez dupliciranih pravila. Možete to učiniti i u JS-u:

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

Ovo odmah ažurira svaki element koji koristi tu varijablu — nemoguće je s kompajliranim Sass varijablama.

## Zašto je to važno

CSS varijable su temelj moderne **tematizacije i tokena dizajna**: jednom definirajte boje/razmake, ponovno ih koristite svugdje, i mijenjajte teme (tamni način rada, varijacije marke) tijekom izvršavanja preko media upita ili JavaScripta.

Oni donose DRY i dinamičke vrijednosti u običan CSS — nije potreban korak gradnje.