एक प्रो की तरह CSS वेरिएबल्स का उपयोग कैसे करें

CSS चर, जिन्हें कस्टम गुण भी कहा जाता है, आपकी स्टाइल शीट में पुनरावृत्ति को कम करने में आपकी सहायता करते हैं। बदले में, यह आपके डिज़ाइन में परिवर्तन करते समय समय और प्रयास बचाने में आपकी सहायता करता है। आप यह भी निश्चिंत हो सकते हैं कि आप कोई भी मान नहीं छोड़ेंगे जिसे आपको अपडेट करने की आवश्यकता है।

DOM तक पहुंच आपको वेरिएबल्स बनाने, उन्हें स्टोर करने और अपनी स्टाइल शीट में उनका पुन: उपयोग करने की अनुमति देती है।

CSS वेरिएबल्स को कैसे परिभाषित और उपयोग करें

अपनी स्टाइल शीट को अधिक व्यवस्थित, बनाए रखने योग्य और पुन: प्रयोज्य बनाने के लिए, आप किसी भी संपत्ति में सीएसएस चर का उपयोग कर सकते हैं जो मूल्य स्वीकार करता है।

एक HTML फ़ाइल और CSS फ़ाइल का निम्न उदाहरण लें जो CSS चर का उपयोग नहीं करती है।

एचटीएमएल:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<शीर्षक>CSS वेरिएबल्स - बटन वेरिएबल्सशीर्षक>
<जोड़नासंबंधित="शैली पत्रक"href="चर। सीएसएस" />
सिर>
<शरीर>
<डिव>





instagram viewer


<एच 1>सीएसएस चरएच 1>
<डिव>
कक्षा="बीटीएन सब-प्राइमरी">प्राथमिक</button>
कक्षा="बीटीएन">माध्यमिक</button>
डिव>
डिव>
शरीर>
एचटीएमएल>

सीएसएस:

.बीटीएन {
गद्दी: 1रेम 1.5रेम;
 पृष्ठभूमि: पारदर्शी;
 फ़ॉन्ट-वजन: 700;
 लाल रंग;
}

आपका पृष्ठ इस तरह दिखना चाहिए:

.बीटीएन उपरोक्त स्टाइल शीट में प्रयुक्त वर्ग गतिशील नहीं है और आपको अलग-अलग बटनों को अनुकूलित करने के लिए एक अलग वर्ग बनाने का कारण बनता है। सुंदर वेबसाइटें बनाने के लिए आपको अपने फ्रंट-एंड स्टाइल के साथ गतिशील होना आवश्यक है। इस तरह से बटनों को लागू करने से उस कार्य को प्राप्त करने में आसानी होगी।

अधिकांश प्रोग्रामिंग भाषाओं की तरह, आपको CSS वेरिएबल्स को इनिशियलाइज़ और सब्स्टीट्यूट करना होगा।

CSS वेरिएबल को इनिशियलाइज़ करने के लिए, वेरिएबल नाम के आगे डबल हाइफ़न लगाएं:

:जड़{
/*सीएसएस वेरिएबल*/
--variable_name: मूल्य;
}

आप किसी वैरिएबल को कहीं भी इनिशियलाइज़ कर सकते हैं लेकिन ध्यान दें कि आप केवल उस वेरिएबल को इनिशियलाइज़्ड सेलेक्टर के अंदर ही इस्तेमाल कर पाएंगे। इस वजह से, रूट चयनकर्ता के अंदर सीएसएस चर पारंपरिक रूप से आरंभ किए जाते हैं। यह DOM के उच्चतम स्तर के तत्व को लक्षित करता है और वैश्विक स्तर पर संपूर्ण HTML दस्तावेज़ द्वारा चरों को एक्सेस करने की अनुमति देता है।

अपने CSS स्टाइल में वेरिएबल को बदलने के लिए, आप इसका उपयोग करेंगे वार () संपत्ति:

:जड़ {
/*सीएसएस वेरिएबल*/
 --प्राथमिक: #900c3f;
 --माध्यमिक: #ff5733;
}
.बीटीएन {
गद्दी: 1रेम 1.5रेम;
 पृष्ठभूमि: पारदर्शी;
 फ़ॉन्ट-वजन: 700;
 रंग: वर(--प्राथमिक);
 पृष्ठभूमि का रंग: वर(-माध्यमिक);
}
उप प्राथमिक {
 रंग: वर(-माध्यमिक);
 पृष्ठभूमि का रंग: वर(--प्राथमिक);
}

रूट चयनकर्ता में दो चर होते हैं: --प्राथमिक और --माध्यमिक. फिर दोनों चरों को इसमें प्रतिस्थापित किया जाता है .बीटीएन वर्ग क्रमशः रंग और पृष्ठभूमि रंग के रूप में।

चरों का उपयोग करके, आप अलग-अलग तत्वों को अधिक आसानी से शैलीबद्ध कर सकते हैं। वेरिएबल्स का पुन: उपयोग करके, आप प्रत्येक उदाहरण में इसे अपडेट करने के लिए एक बार एक बार मूल्य को जल्दी से बदल सकते हैं।

वार () संपत्ति दूसरा तर्क भी ले सकती है। यह तर्क उस स्थिति में पहले तर्क के लिए फ़ॉलबैक मान के रूप में कार्य करता है जहाँ पहला परिभाषित नहीं है या अमान्य है।

उदाहरण के लिए:

:जड़ {
 --प्राथमिक: #900c3f;
 --माध्यमिक: #ff5733;
}
.बीटीएन {
गद्दी: 1रेम 1.5रेम;
 पृष्ठभूमि: पारदर्शी;
 फ़ॉन्ट-वजन: 700;
 रंग: वर(-प्राथमिक, नीला);
}

इस उदाहरण में, स्थानापन्न करें --प्राथमिक में परिवर्तनशील रंग शैली। यदि किसी कारण से, यह मान विफल हो जाता है, तो स्टाइल शीट दूसरे मान को फ़ॉलबैक के रूप में उपयोग करेगी। आप फ़ॉलबैक मान के रूप में अन्य CSS वैरिएबल का भी उपयोग कर सकते हैं।

जावास्क्रिप्ट के साथ सीएसएस वेरिएबल्स को मैनिपुलेट और ओवरराइड करना

JavaScript का उपयोग करके CSS वेरिएबल्स में हेर-फेर करना आपकी वेबसाइट के रूप और अनुभव को तुरंत बदलने का एक शक्तिशाली तरीका हो सकता है। JavaScript का उपयोग करके, आप इन चरों के मान अपडेट कर सकते हैं और अपनी साइट में दिखाई देने वाले परिवर्तन देख सकते हैं.

यह नोट करना महत्वपूर्ण है कि जावास्क्रिप्ट के साथ किए गए परिवर्तन केवल वर्तमान सत्र पर ही लागू होंगे। आपको या तो मूल स्रोत को अपडेट करना होगा या क्लाइंट पर नया मान स्टोर करें, जैसे कुकी में, परिवर्तनों को जारी रखने के लिए।

यहाँ एक उदाहरण दिया गया है कि CSS वेरिएबल के मान को अपडेट करने के लिए JavaScript का उपयोग कैसे किया जाता है।

एचटीएमएल:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<शीर्षक>CSS वेरिएबल्स - बटन वेरिएबल्सशीर्षक>
<जोड़नासंबंधित="शैली पत्रक"href="चर। सीएसएस" />
<लिखी हुई कहानी>
समारोहरंग बदलना() {
// वह तत्व प्राप्त करें जिसे आप चर को बदलना चाहते हैं
कॉन्स्ट मायएलिमेंट = दस्तावेज़क्वेरी चयनकर्ता (":जड़");
// चर का वर्तमान मान प्राप्त करें
होने देना currentValue = getComputedStyle (myElement).getPropertyValue (
"-माध्यमिक"
 );
 // तय करना नयाकीमतके लिए चर
myElement।शैलीसेटप्रॉपर्टी("--माध्यमिक", "#DAF7A6");
 }
लिखी हुई कहानी>
सिर>
<शरीर>
<डिव>
<एच 1>सीएसएस चरएच 1>
<डिव>
कक्षा="बीटीएन सब-प्राइमरी" ऑनक्लिक ="रंग बदलना()">
 प्राथमिक
बटन>
कक्षा="बीटीएन">माध्यमिक</button>
डिव>
डिव>
शरीर>
एचटीएमएल>

सीएसएस:

:जड़ {
 --प्राथमिक: #900c3f;
 --माध्यमिक: #ff5733;
}
.बीटीएन {
गद्दी: 1रेम 1.5रेम;
 पृष्ठभूमि: पारदर्शी;
 फ़ॉन्ट-वजन: 700;
}
उप प्राथमिक {
 रंग: वर(--प्राथमिक);
 पृष्ठभूमि का रंग: वर(-माध्यमिक);
}

इस जावास्क्रिप्ट कोड में, रंग बदलना() जब उपयोगकर्ता उस पर क्लिक करता है तो फ़ंक्शन पहले बटन का रंग अपडेट करता है।

का उपयोग करते हुए डोम ट्रैवर्सल तरीके, आप अपने HTML दस्तावेज़ में लागू वर्गों या चयनकर्ताओं तक पहुँच सकते हैं और मूल्यों में हेरफेर कर सकते हैं।

बटन क्लिक करने से पहले:

बटन क्लिक करने के बाद:

आप नए CSS वेरिएबल बनाने या उन्हें पूरी तरह से हटाने के लिए JavaScript का उपयोग भी कर सकते हैं।

उदाहरण के लिए:

// बनाएं ए नयाचर
दस्तावेज़.documentElement.style.setProperty('--नया रंग', 'नीला');
// एक चर निकालें
दस्तावेज़.documentElement.style.removeProperty('--नया रंग');

प्रीप्रोसेसर के साथ CSS वेरिएबल्स का उपयोग करना

फ्रंटएंड टेक्नोलॉजी के भीतर वेरिएबल्स का उपयोग शुरू में सीएसएस प्रीप्रोसेसर जैसे के साथ हासिल किया गया था एसएएसएस, लेस और स्टाइलस।

CSS प्रीप्रोसेसरों का उद्देश्य कोड विकसित करना है जो मानक CSS की मूलभूत क्षमताओं का विस्तार करता है। फिर ब्राउज़र को समझने के लिए उस कोड को मानक CSS में संकलित करें, जैसे टाइपस्क्रिप्ट जावास्क्रिप्ट के साथ कैसे काम करता है.

CSS वेरिएबल्स के विकास के साथ, प्रीप्रोसेसर अब उतने महत्वपूर्ण नहीं हैं, लेकिन यदि आपके प्रोजेक्ट में CSS वेरिएबल्स के साथ जोड़ दिया जाए तो वे अभी भी कुछ उपयोग की पेशकश कर सकते हैं।

आप एक SASS चर को परिभाषित कर सकते हैं $ मुख्य रंग और CSS वेरिएबल का मान सेट करने के लिए इसका उपयोग करें। फिर, नियमित शैली वर्ग में CSS चर का उपयोग करें।

आप CSS वेरिएबल्स के मानों में हेरफेर करने के लिए SASS फ़ंक्शंस का भी उपयोग कर सकते हैं।

उदाहरण के लिए:

:जड़ {
 --प्राथमिक: $ मुख्य-रंग;
 - माध्यमिक: हल्का (वर(--प्राथमिक), 20%);
}
.बीटीएन {
 रंग: वर(--प्राथमिक);
 पृष्ठभूमि का रंग: वर(-माध्यमिक);
}

यहाँ, SASS फ़ंक्शन हल्का () के मूल्य में हेरफेर करता है --प्राथमिक मूल्य प्राप्त करने के लिए --माध्यमिक.

ध्यान दें कि SASS वेरिएबल्स जावास्क्रिप्ट द्वारा एक्सेस नहीं किए जा सकते हैं। इसलिए यदि आपको रनटाइम पर अपने वेरिएबल्स के मानों में हेरफेर करने की आवश्यकता है, तो आपको CSS वेरिएबल्स का उपयोग करना चाहिए।

सीएसएस चर और प्रीप्रोसेसर का एक साथ उपयोग करके, आप उपयोग करने जैसे दोनों लाभों का लाभ उठा सकते हैं लूप और फ़ंक्शंस जैसी शक्तिशाली प्रीप्रोसेसर सुविधाएँ और CSS वेरिएबल्स जैसे CSS कैस्केडिंग।

वेब डेवलपमेंट में CSS वेरिएबल्स का उपयोग करने के टिप्स

यहां ध्यान देने योग्य कुछ महत्वपूर्ण युक्तियां दी गई हैं जो आपको CSS वेरिएबल्स का बेहतर उपयोग करने में मदद करेंगी।

एक स्पष्ट नामकरण परिपाटी के साथ प्रारंभ करें

अपने वेरिएबल्स के लिए एक नामकरण परिपाटी चुनें जो उन्हें समझने और उपयोग करने में आसान बनाती है। उदाहरण के लिए, एक उपसर्ग का उपयोग करें जैसे --रंग- रंग चर के लिए या --स्पेसिंग- रिक्ति चर के लिए।

विभिन्न स्क्रीन आकारों के लिए अपने डिज़ाइन को समायोजित करना आसान बनाने के लिए मीडिया प्रश्नों में चर का उपयोग करें।

CSS की कैस्केडिंग प्रकृति का लाभ उठाएं

याद रखें कि CSS चर कैस्केडिंग कर रहे हैं, जिसका अर्थ है कि यदि आप मूल तत्व पर एक चर सेट करते हैं, तो यह उसके सभी बच्चों को प्रभावित करेगा।

CSS वेरिएबल का सावधानी से उपयोग करें

बहुत सारे CSS वेरिएबल्स का उपयोग करने से भ्रम पैदा हो सकता है, इसलिए उनका उपयोग सावधानी से करें, और केवल तभी जब यह समझ में आता है और आपके कोड की स्थिरता में सुधार करता है।

अपने चर का परीक्षण करें

सीएसएस चर आपकी स्टाइल शीट के भीतर स्पष्ट और रखरखाव योग्य कोड लिखने का एक अनूठा तरीका है।

यह ध्यान रखना महत्वपूर्ण है कि वे अभी भी सभी ब्राउज़रों पर पूरी तरह से समर्थित नहीं हैं। इसलिए, आपको यह सुनिश्चित करने के लिए ब्राउज़र संगतता के लिए अपने चर का परीक्षण करना चाहिए कि वे अपेक्षा के अनुरूप काम कर रहे हैं और कोई भी फ़ॉलबैक मान आपकी अपेक्षा के अनुसार काम करता है।