# सीएसएस कस्टम प्रॉपर्टी (वेरिएबल्स) — CSS Fundamentals: Layout, Flexbox, Grid और Responsive Design

Source: https://www.skillbyai.com/hi/css/css-custom-properties

> CSS custom properties और var() से पुनः उपयोगी values define करें और theming के लिए उन्हें override करें।

## --name और var()

`--name: value;` से कस्टम प्रॉपर्टी घोषित करें और कहीं भी `var(--name)` से पढ़ें। ये किसी भी अन्य प्रॉपर्टी की तरह कास्केड और इनहेरिट होती हैं।

## एक छोटी थीम

`--brand-color` को एक बार बदलें और हर संदर्भ अपने-आप अपडेट हो जाता है।

```css
:root {
  --brand-color: #264de4;
  --spacing: 16px;
}

.button {
  background-color: var(--brand-color);
  padding: var(--spacing);
}

.link {
  color: var(--brand-color);
}
```

## वेरिएबल की स्कोपिंग

वैश्विक वेरिएबल `:root` पर परिभाषित करें; किसी सेलेक्टर पर स्थानीय रूप से ओवरराइड करके सिर्फ उस सेक्शन को थीम करें — जैसे `.dark-mode` क्लास `--bg-color` को फिर से परिभाषित करे।

**Quiz:** --gap नाम की सीएसएस कस्टम प्रॉपर्टी का मान कैसे पढ़ें?

- [ ] gap(--gap)
- [ ] $gap
- [x] var(--gap)
- [ ] get(--gap)

*Answer:* var(--gap). var() फ़ंक्शन कस्टम प्रॉपर्टी का मौजूदा मान पढ़ता है।