Cad iad na hairíonna saincheaptha CSS (athróga)?

Question

Accepted Answer

**Tuigeann na hairíonna saincheaptha CSS** (athróga) duit luachanna a stóráil uair amháin agus iad a athúsáid. Murab ionann agus athróga réamhphróiseála (Sass), tá siad **beo ag am rith** — tá siad i cascáda, dhaingníonn siad, agus is féidir iad a athrú le JavaScript nó le fiosraí meáin.

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

## Luachanna fúltach

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

## Tá siad i cascáda agus is féidir a bheith scópáilte/a bheith sáraithe orthu

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

Toisc go ndaingníonn siad, tá athróg a shocraítear ar thuismitheoir ar fáil do na gealltanais agus is féidir a sárú ar fhochrainn — rud nach féidir le hathróga Sass (a bhíonn curtha i gcrích) a dhéanamh.

## An ghné a mharú: gréine am rith

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

Caochaidh an dán iomlán tríd athróga a bhig a fhéin-shainiú — aon rialacha dhúbailte. Is féidir leat a dhéanamh i JS chomh maith:

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

Seo nuashonraíonn sé gach eilimint a úsáideann an athróg sin go buan — doshéanta le hathróga Sass cumtha.

## Cén fáth a bhíonn tábhacht ann

Is bonn iad athróga CSS de **dhéithe nua-aimseartha agus comharthaí dearaidh**: dathanna/spásúlachta a shainiú uair amháin, iad a athúsáid i ngach áit, agus téamaí a athrú (mod dorcha, athruithe branda) ag am rith trí fhiosraí meáin nó JavaScript.

Tugann siad an DRY agus luachanna dinimiciúla ar CSS geal — aon chéim tógála ar dhíth.