सीएसएस चर

यदि आप एक डेवलपर हैं, तो आप निश्चित रूप से चर से परिचित हैं, और शायद वे आपके सबसे अच्छे दोस्तों में से एक हैं। परिभाषा के अनुसार, एक चर एक अस्थायी भंडारण होता है जिसमें कुछ मूल्य या सूचना मूल्य होते हैं।
लेकिन यह CSS से कैसे संबंधित है यह हम सभी जानते हैं? एक साल पहले हैबे पर सीएसएस में नियोजित नवाचारों के बारे में एक पोस्ट थी, जिसकी घोषणा सीएसएस काम करने वाले समूह के सदस्य और Google क्रोम टीम द्वारा की गई थी। इन नवाचारों के बीच चर समर्थन की शुरूआत थी।
और दूसरे दिन, सीएसएस वेरिएबल्स के काम के मसौदे की पहली रिलीज के बारे में खबर थी।

CSS चर क्यों हैं?

CSS में वेरिएबल्स - यह वह चीज है जिसे लोग काफी समय से पूछते और चाहते हैं।
इन सभी रंगों, ऊँचाइयों, चौड़ाई और आकारों के बारे में सोचें: इन्हें सिर्फ एक बार घोषित करना अच्छा होगा। और अंत में, वह समय आ गया है जिसका हम इंतजार कर रहे हैं: कम लिखें, लेकिन अधिक करें ।

सीएसएस में अच्छा अभ्यास

जब लोग सीएसएस (रंग) में रंग चर की घोषणा के लिए पूछते हैं, तो सीएसएस फ़ाइल के शीर्ष पर टिप्पणी जोड़ना कुछ ऐसा था जैसे चर का व्यवहार अनुकरण करना:

/*-------------------------- link color: #99D1FF (light blue) box color: #555 (dark gray) --------------------------*/ 

बाद में, मूल्यों को अपडेट करने के लिए, मुझे एक खोज और एक प्रतिस्थापन करना पड़ा।

इसे LESS / Sass में कैसे करें

स्टाइल शीट के लिए वैरिएबल का उपयोग करने का विचार उन कारणों में से एक था जो लेस और सैस प्रकट हुए थे ।

कम

सास

अब यह कैसे चलेगा

सबसे पहले, यह मत भूलो कि कोई भी ब्राउज़र अभी तक इसका समर्थन नहीं करता है। लेकिन यह भविष्य में यह कैसे काम करेगा:
परिभाषा के लिए var-foo , उपयोग के लिए var (foo) ।
ड्राफ्ट निम्नलिखित:

उपसर्ग "var-" के साथ शुरू होने वाली कोई भी संपत्ति का नाम एक चर संपत्ति है। (उपसर्ग "var-" से शुरू होने वाली कोई भी संपत्ति का नाम एक परिवर्तनीय संपत्ति है)

उदाहरण

निम्नलिखित नियम मूल तत्व के लिए गुण नाम "var-header-color" घोषित करता है और इसे "# 99D1FF" मान प्रदान करता है:

 :root { var-header-color: #99D1FF; } 

इसके अलावा, "हेडर-कलर" वैरिएबल का उपयोग करके इसका मान प्रेषित किया जा सकता है:

 h1 { color: var(header-color); } 

ग्रेडिएंट्स को परिभाषित करने में रंग चर का उपयोग करना भी बहुत उपयोगी हो सकता है। आपको बस चर के मूल्य को बदलने की आवश्यकता है, और वॉइला: सभी ग्रेडिएंट अपडेट किए गए हैं। मुझे बहुत अच्छा लगता है।
इसके अलावा, एक लेआउट बनाते समय, चर और कैल्क () फ़ंक्शन को लागू करना दिलचस्प गणना कर सकता है।

निष्कर्ष

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