CSS वेरिएबल

CSS वेरिएबल

var() फ़ंक्शन CSS वेरियेबल के मूल्य को जोड़ने के लिए उपयोग करता है。

CSS वेरियेबल DOM को अद्यतन कर सकते हैं, इसलिए आप जैसे कि जैसे वेरियेबल को स्थानीय या वैश्विक क्षेत्र के वेरियेबल बना सकते हैं, जिसे JavaScript के द्वारा वेरियेबल को संशोधित कर सकते हैं और मीडिया क्वेरी के आधार पर वेरियेबल को संशोधित कर सकते हैं。

CSS वेरियेबल का उपयोग करने के लिए एक अच्छा तरीका डिजाइन के रंगों को शामिल करना है। आप इन्हें वेरियेबल में रख सकते हैं और उसे बार-बार नक़ल करके चिपकाने के बजाय एक बार जोड़ सकते हैं。

पारंपरिक तरीका

नीचे का उदाहरण शैली शीट में कुछ रंगों को परिभाषित करने के पारंपरिक तरीके को दिखाता है (प्रत्येक विशिष्ट एलिमेंट के लिए इस्तेमाल किए जाने वाले रंग को परिभाषित करने के द्वारा):

उदाहरण

body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: #1e90ff;
  background-color: #ffffff;
  पैडिंग: 15पिक्सेल;
}
button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  पैडिंग: 5पिक्सेल;
}

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

var() फ़ंक्शन की व्याकरणिका

var() फ़ंक्शन CSS वेरियेबल के मूल्य को जोड़ने के लिए उपयोग करता है。

var() फ़ंक्शन की व्याकरणिका:

var(name, value)
मूल्य वर्णन
name अनिवार्य। वेरियेबल नाम (दो विषम खड़े डॉटों से शुरू होता है)。
value वैकल्पिक। उत्तरदायी मूल्य (वेरियेबल नहीं मिलने पर इस्तेमाल किया जाता है)。

टिप्पणी:वेरियेबल नाम दो विषम खड़े डॉटों (--) से शुरू होना चाहिए और वर्णक्रम भेद रखना चाहिए!

var() कैसे काम करता है

पहले: CSS वेरियेबल वैश्विक या स्थानीय क्षेत्र के हो सकते हैं।

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

यदि आपको वैश्विक क्षेत्र के वेरियेबल को बनाना है, तो उसे :root चयनकर्ता में घोषित करें :root चयनकर्ता दस्तावेज़ के मूल एलिमेंट को मेल खाता है।

यदि आपको स्थानीय क्षेत्र के वेरियेबल को बनाना है, तो उसे उस कोड के चयनकर्ता में घोषित करें जिसे आपको उसका उपयोग करना है。

नीचे का उदाहरण ऊपर के उदाहरण के समान है, लेकिन यहाँ हम var() फ़ंक्शन का उपयोग करते हैं。

पहले, हम दो वैश्विक वेरियेबल (--blue और --white) घोषित करते हैं। फिर, हम var() फ़ंक्शन को बाद में स्टाइल शीट में वेरियेबल के मूल्यों को जोड़ने के लिए उपयोग करते हैं:

उदाहरण

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

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

var() का उपयोग करने के लिए निम्नलिखित लाभ हैं:

  • कोड को पढ़ने को आसान बनाएं (समझने को आसान बनाएं)
  • रंग के मूल्यों को संशोधित करने को आसान बनाएं

यदि आप नीला और श्वेत को कम हल्के नीला और श्वेत में बदलना चाहते हैं, तो आपको केवल दो वेरियेबल के मूल्यों को संशोधित करना होगा:

उदाहरण

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { बॉर्डर-बॉटम: 2पिक्सेल सॉलिड var(--blue); }
.container {
  कलर: var(--blue);
  बैकग्राउंड-कलर: var(--white);
  पैडिंग: 15पिक्सेल;
}
button {
  बैकग्राउंड-कलर: var(--white);
  कलर: var(--blue);
  बॉर्डर: 1पिक्सेल सॉलिड var(--blue);
  पैडिंग: 5पिक्सेल;
}

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

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

टेबल में दिए गए नंबर इस अट्रिब्यूट का पूर्ण समर्थन करने वाले पहले ब्राउज़र का संस्करण को सूचित करते हैं。

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

CSS var() फ़ंक्शन

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