Mi azok a CSS egyéni tulajdonságok (változók)?

Question

Accepted Answer

**A CSS egyéni tulajdonságok** (változók) lehetővé teszik az értékek egyszer történő tárolását és újrafelhasználását. Az előfeldolgozó (Sass) változóktól eltérően **futás közben élnek** — kaszkádoznak, öröklődnek, és JavaScripttel vagy média-lekérdezésekkel módosíthatók.

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

## Tartalék értékek

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

## Kaszkádoznak és hatókörük lehet/felülírhatók

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

Mivel öröklődnek, a szülőn beállított változó az összes leszármazotthoz elérhető, és egy részfa alatt felülírható — amit a Sass-változók (amelyek fordított) nem tudnak megtenni.

## A gyilkos funkció: futás alatti témaváltás

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

Cseréljen le egy teljes témát néhány változó újradefiniálásával — nincs kettőzött szabály. Ezt JS-ben is megteheti:

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

Ez azonnal frissíti az adott változót használó minden elemet — lehetetlen a fordított Sass-változókkal.

## Miért számít ez

A CSS-változók a modern **témázás és tervezési tokenek** alapja: egyszer határozzon meg színeket/térközt, használja újra mindenhol, és váltogasson témákat (sötét mód, márkavariációk) futás közben médiaerősítés vagy JavaScript segítségével.

DRY-t és dinamikus értékeket hoznak az egyszerű CSS-hez — nem szükséges összeállítási lépés.