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, डायनामिक व्हॅल्यूज आणतात — कोणत्याही बिल्ड स्टेपची आवश्यकता नाही.