Kas yra CSS pasirinktinės savybės (kintamieji)?

Question

Accepted Answer

**CSS pasirinktinės savybės** (kintamieji) leidžia išsaugoti reikšmes kartą ir jas naudoti iš naujo. Skirtingai nuo preprocessoriaus (Sass) kintamųjų, jie **yra tiesioginiai vykdymo metu** — jie kaskadai, paveldimi ir gali būti keičiami su JavaScript arba medijos užklausomis.

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

## Fallback reikšmės

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

## Jie kaskadai ir gali būti apibrėžti/nepaisomi

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

Dėl to, kad jie paveldimi, tėviniam elementui nustatytą kintamąjį galima naudoti visiems jo palikuonims ir jį galima nepaisyti pomedyje — tai, ko Sass kintamieji (kurie yra sukompiliuoti) negali daryti.

## Žudančioji savybė: vykdymo meto tematizacija

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

Pakeiskite visą temą iš naujo apibrėždami kelis kintamuosius — be pasikartojančių taisyklių. Tai galite padaryti ir JS:

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

Tai nedelsdama atnaujina visus elementus, naudojančius tą kintamąjį — neįmanoma su sukompiliuotais Sass kintamaisiais.

## Kodėl tai svarbu

CSS kintamieji yra šiuolaikinio **tematizavimo ir dizaino ženklų** pagrindas: apibrėžkite spalvas/tarpus kartą, naudokite visur ir keiskite temas (tamsus režimas, prekės ženklų variantai) vykdymo metu per medijos užklausas arba JavaScript.

Jie suteikia DRY ir dinamines reikšmes paprastam CSS — nereikalinga kūrimo pakopa.