X'inhuma l-proprjetajiet personalizati tal-CSS (varjabbli)?

Question

Accepted Answer

**Il-proprjetajiet personalizati tal-CSS** (varjabbli) jippermettulek iddaħħal valuri darba u jeġiduhom. Għall-kuntrarju mil-varjabbli tal-preprocessor (Sass), huma **attivi fuq il-ħin ta' tħaddim** — huma jkaskadaw, jitwarax, u jistgħu jinbidlu bil-JavaScript jew 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);
}
```

## Valuri ta' fallback

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

## Huma jkaskadaw u jistgħu jiddaħħlu l-iskop/jibdlu

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

Ghaliex li huma jitwarax, varjabbli ddaħħal fuq ġenitur huwa disponibbli għat-tutti d-dixxendenti u jista' jinbidel fuq subtree — xi ħadd li Sass varjabbli (li huma mkompilati) ma jistgħu jagħmlu.

## Il-feature tat-tkeċċija: tema fuq il-ħin ta' tħaddim

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

Ibdel tema sħiħa billi tiddefinixxi mill-ġdid numru żgħir ta' varjabbli — ebda regoli duplikati. Tista' taħdemha wkoll fil-JS:

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

Dan aġġorna minnufih kull element li juża dak il-varjabbli — impossibbli bil-Sass varjabbli mkompilati.

## Għaliex dan huwa importanti

Il-varjabbli tal-CSS huma l-pedament ta' **teming modern u design tokens**: definixxi kuluri/spazju darba, iġiduhom kullimkien, u ibdel temi (dark mode, varjanti ta' brand) fuq il-ħin ta' tħaddim permezz ta' media queries jew JavaScript.

Huma ġibdu valuri DRY u dinamiċi għas-CSS sempliċi — ebda pass ta' build meħtieġ.