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 અને ગતિશીલ મૂલ્યો લાવે છે — કોઈ બિલ્ડ સ્ટેપ આવશ્યક નથી.