Kaj so CSS lastne lastnosti (spremenljivke)?

Question

Accepted Answer

**CSS lastne lastnosti** (spremenljivke) omogočajo shranjevanje vrednosti in njihovo ponovno uporabo. Za razliko od spremenljivk v preprocessorjih (Sass) so **živé med izvajanjem** — kaskadirajo se, dedujejo in jih je mogoče spreminjati z JavaScriptom ali media poizvedbami.

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

## Nadomestne vrednosti

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

## Kaskadirajo in se lahko omeji/prepišejo

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

Ker se dedujejo, je spremenljivka nastavljena na staršu dostopna vsem potomcem in se lahko prepiše na poddrvesu — nekaj kar spremenljivke Sass (ki se kompajlirajo) ne morejo narediti.

## Ključna funkcionalnost: tematizacija med izvajanjem

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

Zamenjajte celotno temo z redefiniranjem nekaj spremenljivk — brez podvojenih pravil. To lahko storite tudi v JS:

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

To takoj posodobi vsak element, ki uporablja to spremenljivko — nemogoče je s kompajliranimi Sass spremenljivkami.

## Zakaj je to pomembno

CSS spremenljivke so temelj moderne **tematizacije in oblikovnih markerjev**: definirajte barve/razmike enkrat, ponovno jih uporabite povsod in zamenjajte teme (temni način, različice blagovne znamke) med izvajanjem prek media poizvedb ali JavaScripta.

Prinesejo DRY in dinamične vrednosti v navaden CSS — brez koraka gradnje.