CSS custom properties (متغیرات) کیا ہیں؟

Question

Accepted Answer

**CSS custom properties** (متغیرات) آپ کو اقدار کو ایک بار محفوظ کرنے اور انہیں دوبارہ استعمال کرنے دیتے ہیں۔ Preprocessor (Sass) متغیرات کے برعکس، یہ **runtime پر زندہ** ہوتے ہیں — وہ cascade کرتے ہیں، inherit کرتے ہیں، اور JavaScript یا 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);
}
```

## Fallback values

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

## یہ cascade کرتے ہیں اور scope/override کیے جا سکتے ہیں

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

چونکہ وہ inherit کرتے ہیں، parent پر سیٹ کی گئی متغیر تمام descendants کے لیے دستیاب ہے اور subtree پر override کی جا سکتی ہے — کچھ جو Sass متغیرات (جو compiled ہوتے ہیں) نہیں کر سکتے۔

## Killer feature: runtime theming

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

ایک مکمل theme کو صرف کچھ متغیرات کو دوبارہ define کرکے سوئچ کریں — کوئی duplicated rules نہیں۔ آپ یہ JS میں بھی کر سکتے ہیں:

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

یہ فوری طور پر ہر element کو اپ ڈیٹ کرتا ہے جو اس متغیر کو استعمال کر رہے ہیں — compiled Sass متغیرات کے ساتھ ناممکن۔

## اہمیت کیوں ہے

CSS متغیرات جدید **theming اور design tokens** کی بنیاد ہیں: رنگوں/spacing کو ایک بار define کریں، ہر جگہ دوبارہ استعمال کریں، اور themes (dark mode، brand variants) کو runtime میں media queries یا JavaScript کے ذریعے سوئچ کریں۔

یہ DRY اور dynamic values کو plain CSS میں لاتے ہیں — کوئی build step ضروری نہیں۔