सीएसएस वेरिएबल्स क्विक स्टार्ट गाइड (उपयोग के मामले, सिंटैक्स और उदाहरण)

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

यह क्या है

एक गुंजाइश के साथ बटन के लिए एक सरल अनुप्रयोग उदाहरण

सीएसएस चर आप सीएसएस में पुन: प्रयोज्य मूल्यों को परिभाषित करने की अनुमति देते हैं।

वे बहुत समय पहले दिखाई दिए। हाल ही में, उन्होंने व्यापक ब्राउज़र समर्थन के कारण लोकप्रियता हासिल करना शुरू कर दिया है ।

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

शैली चर का उपयोग क्यों करें?

चर हमें DRY के सिद्धांत का पालन करने की अनुमति देते हैं (अपने आप को दोहराएं नहीं)। उनके लिए धन्यवाद, हमारे पास डुप्लिकेट मानों के लिए एकल संदर्भ बिंदु बनाने का एक तरीका भी है। यदि आप एक प्रीप्रोसेसर का उपयोग करते हैं, तो, सबसे अधिक संभावना है, इस दृष्टिकोण के फायदे पहले से ही आपको परिचित हैं। ज्यादातर, यह बेस रंग सेट करने के लिए उपयोग किया जाता है, जिसका उपयोग कई तत्वों के लिए किया जाता है।


कई चयनकर्ताओं के लिए पृष्ठभूमि का रंग दोहराएं

ऊपर के स्निपेट में, #e74c3c का मान एक चर हो सकता है। यदि हम इस मान से एक चर बनाते हैं, तो हमें एक बिंदु मिलता है जिसे संदर्भित किया जा सकता है। यह बग और शैली की समस्याओं के जोखिम को कम करता है, क्योंकि यह आगे रखरखाव की सुविधा देता है।


एक चर का उपयोग करके संदर्भ बिंदु बनाना

दूसरे स्निपेट में, मैं यह दिखाने के लिए एक प्रीप्रोसेसर का उपयोग करता हूं कि आप background-color मान के लिए एक चर का उपयोग कैसे कर सकते हैं।

देशी सीएसएस चर के बजाय प्रीप्रोसेसर चर का उपयोग क्यों नहीं करें?

अच्छा सवाल है। ज्यादातर मामलों में, आप प्रीप्रोसेसर चर के लिए प्रतिबद्ध रहना पसंद करेंगे। यदि आप पहले से ही इनका उपयोग कर रहे हैं तो ऐसा है। लेकिन आप एक ही बार में दोनों दृष्टिकोणों का लाभ उठा सकते हैं। यह प्रासंगिक हो जाता है जब देशी CSS चरों की क्षमताओं का पूरी तरह से उपयोग करना आवश्यक हो जाता है। इसके बारे में बाद में।

जब मूल सीएसएस चर का उपयोग किया जाना चाहिए:

1. आपके पास प्रीप्रोसेसर नहीं है या आप इसका उपयोग नहीं करते हैं।
2. आप देशी सीएसएस चर का लाभ लेना चाहते हैं।

मूल सीएसएस चर के मुख्य लाभ

मेरी राय में, देशी सीएसएस चर के दो बड़े फायदे हैं।

पहला वाला। इन्हें रनटाइम पर अपडेट किया जाता है! उन्हें मीडिया क्वेरी, स्टेट्स या यहां तक ​​कि जावास्क्रिप्ट का उपयोग करके नियंत्रित किया जा सकता है। ब्राउज़र किए गए परिवर्तनों को लागू करेगा। इससे कई संभावनाएं खुलती हैं।

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

सबसे सुंदर वाक्य रचना नहीं

आइए एक उदाहरण देखें।



क्या है :root छद्म :root ? सब कुछ तार्किक है: यह एक पेड़ की जड़ का छद्म चयनकर्ता है। :root चयनकर्ता का उपयोग वैश्विक चर को परिभाषित करने के लिए किया जा सकता है। इस मामले में, हम --primary वैरिएबल के लिए rebeccapurple मान को परिभाषित करते हैं।



एक चर को परिभाषित करने के लिए, दो हाइफ़न का उपयोग उपसर्ग के रूप में किया जाता है।



एक चर का उपयोग करने के लिए, हमें var फ़ंक्शन की आवश्यकता है।

और क्या होता है जब हम एक ऐसे चर का उल्लेख करते हैं जिसका मूल्य निर्धारित नहीं है? इस स्थिति में, आप फ़ॉलबैक मान या डिफ़ॉल्ट मान सेट कर सकते हैं। var फ़ंक्शन फ़ॉलबैक मान या डिफ़ॉल्ट मानों के अनुरूप एक दूसरे वैकल्पिक पैरामीटर का समर्थन करता है।



यह स्निपेट button टैग के लिए स्रोत शैली सेट करता है। जहां background-color लिए संभव है, मूल्य - --btn-color । यदि चर मौजूद नहीं है या मान सेट नहीं है, तो मान --primary ।

हमारी गिरावट के लिए एक चर का उपयोग करने की कोई आवश्यकता नहीं है। आप मान ले सकते हैं। लेकिन चर के साथ कोड समर्थन को लागू करना आसान होगा।

ध्यान दें कि button.btn लिए कोई शैली घोषित नहीं की button.btn । इसके बजाय, मान अद्यतन किया गया है। अब कैस्केड और स्कोप पर जाना उचित है।

कैस्केडिंग और स्कोप

जब चर के साथ काम करते हैं, तो कैस्केडिंग को ध्यान में रखा जाता है, साथ ही साथ चर का दायरा भी। पिछले उदाहरण में, चर को :root छद्म :root में घोषित किया गया है। में सभी चर :root चयनकर्ता वैश्विक गुंजाइश है।

ऊपर के एक उदाहरण में - सभी चयनकर्ताओं के लिए उपलब्ध थी। गुंजाइश के कारण, इस मूल्य को ओवरराइड किया जा सकता है। उदाहरण के लिए, हम चाहते हैं कि - premium क्लास के लिए --primary वैल्यू बदल जाए।



इस खंड में, एक premium वर्ग तत्व के --primary वैरिएबल का मान dodgerblue । यही है, अगर कोई वर्ग button लागू नहीं होता है, तो चर का मूल्य rebeccapurple । हालांकि, यदि आप premium वर्ग को लागू करते हैं, तो रंग dodgerblue बदल जाता है।

यह ध्यान देने योग्य है कि इनलाइन शैलियों के साथ, इनलाइन सीएसएस चर की सर्वोच्च प्राथमिकता है।



इस खंड में, बटन का पृष्ठभूमि रंग red सेट किया जाएगा, इस तथ्य के बावजूद कि premium वर्ग का उपयोग यहां किया जाता है। ऐसा इसलिए होता है क्योंकि मान --primary सीधे टैग में वर्णित है।

मूल्य प्रबंधन

आप अन्य सीएसएस नियमों का उपयोग करके सीएसएस चर के मूल्यों को नियंत्रित कर सकते हैं। मुख्य दृष्टिकोण मीडिया क्वेरी और राज्य परिवर्तन हैं।

उदाहरण के लिए, स्क्रीन की चौड़ाई एक निश्चित मान से अधिक होने पर एक चर का मान बदल सकता है।



परिवर्तन ब्राउज़र को फिर से शुरू करेगा और उपयोगकर्ता को परिणाम दिखाएगा।

यदि चौड़ाई 768px से अधिक है, तो इस स्थिति में, पृष्ठभूमि ढाल बदल जाएगी।

राज्यों का उपयोग करके चर का प्रबंधन कैसे करें? उदाहरण के लिए, button । सीएसएस चर button की स्थिति के आधार पर अपडेट किया जाएगा।



इस स्थिति में, आप राज्य के आधार पर बटन शैली को अनुकूलित कर सकते हैं :active ।

जावास्क्रिप्ट का उपयोग कर मूल्यों का प्रबंधन

CSS से वैरिएबल प्रबंधित करना बहुत सुविधाजनक है। लेकिन वास्तव में उन पर नियंत्रण पाने के लिए, आपको जावास्क्रिप्ट का उपयोग करके उन्हें नियंत्रित करना होगा। सौभाग्य से, यह वास्तविक है।

setProperty विधि setProperty तत्व शैली चर सेट और प्रबंधित करने की अनुमति देती है।



चर सेट को अद्यतन कैसे करें :root छद्म :root ? अच्छा सवाल है। डॉक्‍यूमेंटमेंट के लिए आपको documentElement प्रॉपर्टी सेट करनी होगी।



जब आप सीएसएस चर को इस तरह से हेरफेर कर सकते हैं, तो कई संभावनाएं हैं। mousemove घटना के साथ कर्सर स्थिति पर नज़र रखने के बारे में उत्सुक।

कैल्क () और त्यागने वाली इकाइयों का उपयोग करना

चर में इकाइयों का उपयोग न करने का प्रयास करें। यह आगे रखरखाव की सुविधा प्रदान करेगा।



calc() फ़ंक्शन आपको वांछित इकाइयों के साथ मूल्यों को सामान्य करने और सेट करने की अनुमति देता है।



सीएसएस चर भी पसंदीदा इकाइयों के बारे में जानकारी स्टोर करने के लिए इस्तेमाल किया जा सकता है। स्पष्टता के लिए, हमने "1px" अंश में लिया, लेकिन आप इसे "1pt", "1 मिनट" आदि के साथ बदल सकते हैं।

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



जब इकाइयों को सीएसएस में समाहित किया जाता है, तो सेवा सीएसएस से भी गुजरती है।

आवेदन उदाहरण

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

एक कुत्ते और एक गेंद के साथ उदाहरण

चलो एक साथ एक उदाहरण काम करते हैं!



यहां हम केवल कर्सर की स्थिति को ट्रैक करते हैं और दो इमोजी की स्थिति को अपडेट करते हैं।



यहां मुख्य बात यह है कि translate का उपयोग करते हुए एक केंद्रीय बिंदु से इमोजीस को स्थानांतरित करना है और साथ ही कुत्ते को transition-delay लागू करना है।

स्थिति को कैसे अपडेट करें? --x और --y लिए चर का उपयोग करना।



कैसे कुत्ते को पागल बनाने के लिए? transition-delay लागू किया जाता है। transition-timing-function का उपयोग करके एक जटिल मंदी प्रभाव भी प्राप्त किया जा सकता है।



यह केवल mousemove लिए इन चरों को अद्यतन करने के लिए बना हुआ है।



वह सब है। एक जोड़े में और अधिक मामूली सुधार, और कुछ ऐसा होता है:

कमियों

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

1. चरों का एनीमेशन। इस लेख में, मैंने एनीमेशन के बारे में बिल्कुल भी बात नहीं की। आप इसके लिए चर का उपयोग कर सकते हैं। लेकिन मूल्यों का एनीमेशन स्वयं नहीं किया जा सकता है।
2. CSS चरों का चयनकर्ताओं में उपयोग नहीं किया जा सकता है। यह तर्कसंगत है, लेकिन यह बहुत अच्छा होगा अगर इस तरह का इंटरपोलेशन उपलब्ध होगा। एनटीएच-चाइल्ड चयनकर्ता में चर का उपयोग करना अच्छा होगा।

निष्कर्ष

मुझे सीएसएस चर के साथ काम करना पसंद है। जितना अधिक मैं उन्हें करता हूं, उतने अधिक आवेदन उदाहरण दिमाग में आते हैं।

इस लेख के लिए धन्यवाद, आप स्वयं सीएसएस चर सीखना शुरू कर सकते हैं।

यदि आप सीएसएस चर का अधिक विस्तृत अवलोकन प्राप्त करने में रुचि रखते हैं, तो इस वीडियो को देखें ।

LOOKING.HOUSE - इस परियोजना ने 40 देशों में 150 से अधिक बिंदुओं को देख ग्लास एकत्र किया। आप जल्दी से होस्ट, पिंग, ट्रेसरआउट और एमआरटी कमांड निष्पादित कर सकते हैं।