CSS ओवरराइडिंग वेरिएबल्स
स्थानीय चर के साथ वैश्विक चर को ओवरराइड करें
पिछले पृष्ठ से हमने सीखा है कि वैश्विक चर को पूरे दस्तावेज़ के माध्यम से एक्सेस/उपयोग किया जा सकता है, जबकि स्थानीय चर का उपयोग केवल चयनकर्ता के अंदर किया जा सकता है जहां इसे घोषित किया गया है।
पिछले पृष्ठ से उदाहरण देखें:
उदाहरण
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
कभी-कभी हम चाहते हैं कि वेरिएबल केवल पृष्ठ के एक विशिष्ट भाग में ही बदलें।
मान लें कि हम बटन तत्वों के लिए नीले रंग का एक अलग रंग चाहते हैं। फिर, हम बटन चयनकर्ता के अंदर --blue चर को फिर से घोषित कर सकते हैं। जब हम इस चयनकर्ता के अंदर var(--blue) का उपयोग करते हैं, तो यह यहां घोषित स्थानीय --blue चर मान का उपयोग करेगा।
हम देखते हैं कि स्थानीय --blue चर बटन तत्वों के लिए वैश्विक --blue चर को ओवरराइड करेगा:
उदाहरण
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
--blue: #0000ff; /* local variable will
override global */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
एक नया स्थानीय चर जोड़ें
यदि एक चर का उपयोग केवल एक ही स्थान पर किया जाना है, तो हम एक नया स्थानीय चर भी घोषित कर सकते हैं, जैसे:
उदाहरण
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
--button-blue: #0000ff; /* new local
variable */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-blue);
padding: 5px;
}
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो
var()फ़ंक्शन का पूर्ण समर्थन करता है।
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
सीएसएस वर () समारोह
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |