CSS वेरिएबल
फ़िल्टर पिक्सेल बदलते थे। कस्टम प्रॉपर्टी (CSS variables) रख-रखाव आसान करती हैं: :root पर एक --brand, बटन var(--brand) पढ़ते हैं — टोकन एक बार बदलें, पूरा UI पीछे चले। ये cascade और inherit करती हैं; नाम आप चुनते हैं।
अपना नाम: --token
सामान्य declaration जैसा, लेकिन नाम दो डैश से शुरू:
:root {
--brand: #2563eb;
--brand-contrast: #ffffff;
--surface: #f8fafc;
--text: #0f172a;
--radius-md: 0.5rem;
--space-3: 0.75rem;
}
:root दस्तावेज़ की जड़ — साइट-वाइड टोकन का घर। किसी selector पर --names भी; descendants inherit करते हैं जब तक पास override न हो।
var() से पढ़ना
.btn-primary {
background: var(--brand);
color: var(--brand-contrast);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3) calc(var(--space-3) * 1.5);
font: inherit;
cursor: pointer;
}
.btn-primary:hover {
background: color-mix(in srgb, var(--brand) 88%, black);
}
फोकस: टोकन + var()। नाम प्रोजेक्ट में एक जैसे रखें।
var() में fallback
.card {
background: var(--surface, #ffffff);
color: var(--text, #111827);
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
}
दूसरा argument backup है; var() में नाम की typo fallback से नहीं सुधरेगी।
स्कोप और local override
📊 कस्टम प्रॉपर्टी कहाँ
| स्कोप | selector | कब |
|---|---|---|
| ग्लोबल | :root |
ब्रांड, spacing, radius |
| कंपोनेंट | .card, .alert |
एक पैटर्न के defaults |
| variant | .card.is-warning |
कुछ टोकन बदलें |
| runtime | [data-theme="dark"] |
palette बदलें; same var(--surface) |
override पास रखें। :root सब पर; कभी local --accent बेहतर।
card पर local accent
.card {
--accent: var(--brand);
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: var(--radius-md);
padding: var(--space-3);
}
.card.is-featured {
--accent: #7c3aed;
}
.card__title {
color: var(--accent);
}
.is-featured सिर्फ --accent बदलता है; title/border var() से।
हर रंग duplicate किए बिना theme
:root {
--surface: #f8fafc;
--text: #0f172a;
--brand: #2563eb;
}
[data-theme="dark"] {
--surface: #0f172a;
--text: #e2e8f0;
--brand: #60a5fa;
}
body {
background: var(--surface);
color: var(--text);
}
JS dataset.theme बदल सकता है — टोकन live अपडेट।
कस्टम vs Sass $
Sass build पर खत्म; --tokens ब्राउज़र cascade में।
खुद करें
:rootपर 5 टोकन; बटन सिर्फvar()..cardपर--accent+.is-featured.- टोकन हटाकर fallback.
- DevTools में
[data-theme="dark"]. #2563eb→var(--brand).
गलतियाँ
--के बिनाbrand:var()property नाम में- typo, fallback नहीं
सार
--name;var(--name, fallback):rootglobal; local override- अगला: calc (Modern Toolkit)
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी