CSS kaziia (variables) ni nini?

Question

Accepted Answer

**CSS kaziia** (variables) hukurusu kuhifadhi kiwango mara moja na kuzitumia tena. Tofauti na preprocessor (Sass) variables, ziko **hai wakati wa matembezi** — zinakweka, zinaarishi, na zinaweza kubadilishwa na JavaScript au media queries.

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

## Maadili ya nyuma

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

## Zinakweka na zinaweza kukamatizwa/kusasishwa

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

Kwa sababu zinaarishi, variable iliyowekwa kwa mzazi inapatikana kwa wote waandao na inaweza kusasishwa kwenye subeni — kitu ambacho Sass variables (ambazo zimecubuniwa) haiwezi kufanya.

## Sifa mahususi: tematizazi ya wakati wa matembezi

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

Badilisha tema nzima kwa kufafanua vigezo vichache — hakuna sheria imezaa. Unaweza pia kuifanya katika JS:

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

Hii husasisha karibu kila kipengele kinachotumia variable hiyo — haiwezekani na Sass variables zilizocubuniwa.

## Kwa nini inashangilia

CSS variables ni msingi wa **tematizazi na tokens za muundo** wa kisasa: fafanua rangi/nafasi mara moja, zitumie kila mahali, na badilisha mitindo (modi nyeusi, lahaja za chapa) wakati wa matembezi kupitia media queries au JavaScript.

Zinaleta DRY na maadili ya dynamic kwa CSS plain — hatujihitaji hatua ya ujenzi.