Çfarë janë vetitë e personalizuara të CSS (variablat)?

Question

Accepted Answer

**Vetitë e personalizuara të CSS** (variablat) ju lejojnë të ruani vlerat një herë dhe t'i ripërdorni ato. Ndryshe nga variablat e paraprocesuesit (Sass), ato janë **aktive në kohën e ekzekutimit** — ato kaskadohen, trashëgohen dhe mund të ndryshohen me JavaScript ose pyetje mediumesh.

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

## Vlerat e nënzëvendësimit

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

## Ato kaskadohen dhe mund të kufizohen/shfuqizohen

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

Bekua se ato trashëgohen, një variabël e vendosur në një prind është e disponueshme për të gjithë pasardhësit dhe mund të shfuqizohet në një nënpemë — diçka që variablat e Sass (të cilat kompilohen) nuk mund ta bëjnë.

## Veçoria themelore: tematizimi në kohën e ekzekutimit

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

Ndërroni një temë të tërë duke ripërcaktuar disa variabla — pa rregulla të dyfishta. Mund ta bëni këtë edhe në JS:

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

Kjo përditëson menjëherë secilin element që përdor atë variabël — e pamundur me variablat e Sass-it të kompiluar.

## Pse është e rëndësishme

Variablat e CSS janë themelimi i **tematizimit dhe shenjave të dizajnit** modern: përcaktoni ngjyra/hapësira një herë, ripërdorini kudo dhe ndërroni tema (mënyrë e errët, varianta brande) në kohën e ekzekutimit përmes pyetjeve mediumesh ose JavaScript.

Ata sjellin vlerat DRY dhe dinamike në CSS të thjeshtë — nuk kërkohet një hap ndërtimi.