CSS कस्टम प्रापर्टीज (भेरिएबलस) के हुन्?

Question

Accepted Answer

**CSS custom properties** (variables) ले गरी मानहरु एक पल भण्डार गरेर पुनः प्रयोग गर्न सकिन्छ। Preprocessor (Sass) variables को विपरीत, तिनीहरु **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 हुन्छन् र scoped/overridden गर्न सकिन्छन्

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

किनकि तिनीहरु inherit गर्छन्, parent मा सेट गरिएको variable सबै descendants को लागी उपलब्ध हुन्छ र subtree मा override गर्न सकिन्छ — जुन कुरा Sass variables (जो compiled हुन्छन्) गर्न सक्दैनन्।

## किलर फिचर: 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 परिवर्तन गर्नु भेरिएबलको मुष्ठी पुनः परिभाषित गरी गर्न सकिन्छ — कुनै पनि दोहोरिएको rules छैन। तपाइँ JS मा पनि गर्न सक्नुहुन्छः

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

यो तुरुन्त त्यो भेरिएबल प्रयोग गरी प्रत्येक element अपडेट गर्दछ — compiled Sass variables सँग असम्भव।

## यो किन महत्त्वपूर्ण छ

CSS variables आधुनिक **theming र design tokens** को आधार हुन्: रंग/spacing एकपल परिभाषित गर्नु, सबै ठाउँमा पुनः प्रयोग गर्नु, र media queries वा JavaScript को माध्यमबाट themes (dark mode, brand variants) runtime मा स्विच गर्नु।

तिनीहरु plain CSS मा DRY, dynamic values ल्याउँछन् — कुनै build step आवश्यक छैन।