CSS चर - var () फ़ंक्शन
सीएसएस चर
var()फ़ंक्शन का उपयोग CSS चर के मान को सम्मिलित करने के लिए किया जाता है ।
CSS चरों की DOM तक पहुंच है, जिसका अर्थ है कि आप स्थानीय या वैश्विक दायरे के साथ चर बना सकते हैं, जावास्क्रिप्ट के साथ चर बदल सकते हैं और मीडिया प्रश्नों के आधार पर चर बदल सकते हैं।
CSS वेरिएबल्स का उपयोग करने का एक अच्छा तरीका है जब आपके डिज़ाइन के रंगों की बात आती है। एक ही रंग को बार-बार कॉपी और पेस्ट करने के बजाय, आप उन्हें वेरिएबल में रख सकते हैं।
पारंपरिक तरीका
निम्नलिखित उदाहरण स्टाइल शीट में कुछ रंगों को परिभाषित करने का पारंपरिक तरीका दिखाता है (प्रत्येक विशिष्ट तत्व के लिए उपयोग किए जाने वाले रंगों को परिभाषित करके):
उदाहरण
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color:
#1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px
solid #1e90ff;
padding: 5px;
}
Var () फ़ंक्शन का सिंटैक्स
var()फ़ंक्शन का उपयोग CSS चर के मान को सम्मिलित करने के लिए किया जाता है ।
var()फ़ंक्शन का सिंटैक्स इस प्रकार है:
var(--name, value)
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
नोट: चर नाम दो डैश (--) से शुरू होना चाहिए और यह केस संवेदी है!
कैसे var () काम करता है
सबसे पहले: CSS वेरिएबल का वैश्विक या स्थानीय दायरा हो सकता है।
पूरे दस्तावेज़ के माध्यम से वैश्विक चर का उपयोग/उपयोग किया जा सकता है, जबकि स्थानीय चर का उपयोग केवल चयनकर्ता के अंदर किया जा सकता है जहां इसे घोषित किया गया है।
वैश्विक दायरे के साथ एक चर बनाने के लिए, इसे :root
चयनकर्ता के अंदर घोषित करें। :rootचयनकर्ता दस्तावेज़ के मूल तत्व से मेल खाता है ।
स्थानीय दायरे के साथ एक चर बनाने के लिए, इसे उस चयनकर्ता के अंदर घोषित करें जो इसका उपयोग करने जा रहा है।
निम्नलिखित उदाहरण ऊपर के उदाहरण के बराबर है, लेकिन यहां हम var()फ़ंक्शन का उपयोग करते हैं।
सबसे पहले, हम दो वैश्विक चर (--नीला और - सफेद) घोषित करते हैं। फिर, हम
var()बाद में स्टाइल शीट में वेरिएबल्स के मान को सम्मिलित करने के लिए फ़ंक्शन का उपयोग करते हैं:
उदाहरण
: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;
}
var() का उपयोग करने के लाभ हैं:
- कोड को पढ़ने में आसान बनाता है (अधिक समझने योग्य)
- रंग मानों को बदलना बहुत आसान बनाता है
नीले और सफेद रंग को नरम नीले और सफेद रंग में बदलने के लिए, आपको बस दो चर मानों को बदलने की आवश्यकता है:
उदाहरण
:root {
--blue: #6495ed;
--white: #faf0e6;
}
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;
}
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो
var()फ़ंक्शन का पूर्ण समर्थन करता है।
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
सीएसएस वर () समारोह
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |