CSS कस्टम प्रॉपर्टीज़ (वेरिएबल्स) क्या हैं?

Question

Accepted Answer

**CSS कस्टम प्रॉपर्टीज़** (वेरिएबल्स) आपको एक बार मान संग्रहीत करने और उन्हें फिर से उपयोग करने देती हैं। प्रीप्रोसेसर (Sass) वेरिएबल्स के विपरीत, ये **रनटाइम पर लाइव** हैं — वे कैस्केड करते हैं, विरासत में मिलते हैं, और JavaScript या मीडिया क्वेरीज़ के साथ बदले जा सकते हैं।

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

## फॉलबैक मान

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

## वे कैस्केड करते हैं और स्कोप/ओवरराइड किए जा सकते हैं

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

क्योंकि वे विरासत में मिलते हैं, माता-पिता पर सेट किया गया एक वेरिएबल सभी वंशजों के लिए उपलब्ध है और एक सबट्री पर ओवरराइड किया जा सकता है — कुछ जो Sass वेरिएबल्स (जो संकलित हैं) नहीं कर सकते।

## किलर फीचर: रनटाइम थीमिंग

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

मुट्ठी भर वेरिएबल्स को फिर से परिभाषित करके एक पूरा थीम स्विच करें — कोई डुप्लिकेट नियम नहीं। आप इसे JS में भी कर सकते हैं:

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

यह तुरंत उस वेरिएबल का उपयोग करने वाले हर तत्व को अपडेट करता है — संकलित Sass वेरिएबल्स के साथ असंभव।

## यह क्यों महत्वपूर्ण है

CSS वेरिएबल्स आधुनिक **थीमिंग और डिज़ाइन टोकन्स** की नींव हैं: रंग/स्पेसिंग एक बार परिभाषित करें, हर जगह पुनः उपयोग करें, और मीडिया क्वेरीज़ या JavaScript के माध्यम से रनटाइम पर थीम (डार्क मोड, ब्रांड वेरिएंट्स) स्विच करें।

वे सादे CSS में DRY और गतिशील मान लाते हैं — कोई बिल्ड स्टेप आवश्यक नहीं।