Co jsou vlastní vlastnosti CSS (proměnné)?

Question

Accepted Answer

**Vlastní vlastnosti CSS** (proměnné) vám umožňují uložit hodnoty jednou a znovu je použít. Na rozdíl od proměnných preprocesoru (Sass) jsou **za běhu živé** — kaskádují, dědí se a lze je měnit pomocí JavaScriptu nebo mediálních dotazů.

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

## Záložní hodnoty

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

## Kaskádují a lze je určit/přepsat

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

Protoože se dědí, proměnná nastavená na rodičovský prvek je dostupná všem potomkům a lze ji přepsat v podstromu — něco, co nemohou dělat proměnné Sass (které jsou kompilované).

## Hlavní vlastnost: motivy za běhu

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

Přepněte celý motiv předefiniováním několika proměnných — bez duplikovaných pravidel. Můžete to také udělat v JS:

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

Toto okamžitě aktualizuje každý prvek používající tuto proměnnou — nemožné u kompilovaných proměnných Sass.

## Proč na tom záleží

Proměnné CSS jsou základem moderních **motivů a tokenů designu**: definujte barvy/mezery jednou, znovu je používejte všude a přepínejte motivy (tmavý režim, varianty značky) za běhu pomocí mediálních dotazů nebo JavaScriptu.

Přinášejí DRY a dynamické hodnoty do obyčejného CSS — není potřeba žádný krok sestavení.