CSS ओवरले वेरिएबल

स्थानीय वेरियेबल को वैश्विक वेरियेबल पर ओवरराइड करना

पिछले पृष्ठ से हमें पता चलता है कि हम वैश्विक वेरियेबल को पूरे दस्तावेज़ में उपयोग/उपलब्ध कर सकते हैं, जबकि स्थानीय वेरियेबल केवल उस चयनक में उपयोग किया जा सकता है जहाँ यह घोषित किया गया है。

अभी ऊपर वाले उदाहरण को देखिए:

उदाहरण

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  बैकग्राउंड-कलर: var(--white);
  पैडिंग: 15पिक्सेल;
}
button {
  बैकग्राउंड-कलर: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  पैडिंग: 5पिक्सेल;
}

खुद से प्रयास करें

कभी-कभी, हम चाहते हैं कि वेरियेबल केवल पृष्ठ के विशेष हिस्से में परिवर्तित हो।

यदि हम बटन एलीमेंट को अलग रंग का अपनाना चाहते हैं, तो हम button चयनक के अंदर --blue वेरियेबल को फिर से घोषित कर सकते हैं. जब हम इस चयनक में var(--blue) का उपयोग करते हैं, तो यह यहाँ घोषित स्थानीय --blue वेरियेबल का मान उपयोग करेगा.

हमें दिखाई देता है कि स्थानीय --blue वेरियेबल button एलीमेंट के वैश्विक --blue वेरियेबल को ओवरराइड करता है:

उदाहरण

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  बैकग्राउंड-कलर: var(--white);
  पैडिंग: 15पिक्सेल;
}
button {
  --blue: #0000ff;
  बैकग्राउंड-कलर: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  पैडिंग: 5पिक्सेल;
}

खुद से प्रयास करें

एक नई स्थानीय वेरियेबल जोड़ें

यदि केवल एक स्थान पर एक वेरियेबल का उपयोग करना है, तो हम इस तरह एक नई स्थानीय वेरियेबल घोषित कर सकते हैं:

उदाहरण

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  बैकग्राउंड-कलर: var(--white);
  पैडिंग: 15पिक्सेल;
}
button {
  --button-blue: #0000ff;
  बैकग्राउंड-कलर: var(--white);
  कलर: var(--button-blue);
  बॉर्डर: 1पिक्सेल सॉलिड var(--button-blue);
  पैडिंग: 5पिक्सेल;
}

खुद से प्रयास करें

ब्राउज़र समर्थन

शेडेज़ में दिए गए नंबरों को पहली ब्राउज़र आईडी के रूप में दर्शाया गया है जो इस अट्रिब्यूट को पूरी तरह से समर्थित करता है。

फ़ंक्शन
var() 49.0 15.0 31.0 9.1 36.0

CSS var() फ़ंक्शन

फ़ंक्शन वर्णन
var() CSS वेरिएबल के मान को इंसर्ट करें。