कम सीएसएस क्या है और आप इसका उपयोग कैसे करते हैं?

यदि आप एक अनुभवी CSS डेवलपर हैं, तो आप भाषा की कमियों से अच्छी तरह वाकिफ होंगे। यह अभी भी लंबे समय से अनुरोधित सुविधाओं जैसे नेस्टिंग और मिक्सिन के लिए व्यापक समर्थन का अभाव है।

कम (लीनर स्टाइल शीट्स) कई शक्तिशाली सुविधाओं के साथ CSS का विस्तार है। यदि आप CSS जानते हैं, तो लेस सीखना आसान है क्योंकि लेस का सिंटैक्स बहुत समान है।

कैसे कम स्थापित करें

आप इसके साथ कम स्थापित कर सकते हैं जावास्क्रिप्ट पैकेज मैनेजर, एनपीएम चलाकर:

एनपीएम कम-जी स्थापित करें

स्थापना के बाद, आप संकलित कर सकते हैं ।कम फ़ाइलें करने के लिए सीएसएस का उपयोग कम आज्ञा। उदाहरण के लिए, निम्न आदेश संकलित करता है शैली। कम और परिणामों को a में आउटपुट करता है शैली.सीएसएस फ़ाइल।

कम शैली। कम शैली। सीएसएस

कम में चर

भिन्न नियमित CSS, जो चर परिभाषित करने के लिए "--" ऑपरेटर का उपयोग करता है, "@" प्रतीक का उपयोग करके चर को कम परिभाषित करता है। उदाहरण के लिए:

@चौड़ाई:40 पीएक्स;
@ऊंचाई:80 पीएक्स;

कोड ब्लॉक केवल दो चर, चौड़ाई और ऊंचाई बनाता है जिसमें क्रमशः दो मान होते हैं: 40px और 80px। CSS में आमतौर पर उपयोग किए जाने वाले मानों को लेना और उन्हें एक चर में संग्रहीत करना आम बात है। इससे उन मानों को संशोधित करना आसान हो जाता है क्योंकि नियंत्रण का केवल एक ही स्रोत होता है।

यहां बताया गया है कि आप लेस में वेरिएबल्स का उपयोग कैसे कर सकते हैं। एक बनाएं index.htm फ़ाइल और निम्न बॉयलरप्लेट कोड जोड़ें:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<मेटाcharset="यूटीएफ-8">
<मेटाHTTP-समतुल्य="एक्स-यूए-संगत"संतुष्ट="आईई = किनारा">
<मेटानाम="व्यूपोर्ट"संतुष्ट="चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1.0">
<जोड़नासंबंधित="शैली पत्रक"href="शैली.सीएसएस">
<शीर्षक>कम सीएसएस का उपयोग करनाशीर्षक>
सिर>
<शरीर>
<डिव>
 पृथ्वी ग्रह के बच्चों की ओर से नमस्कार!
डिव>
शरीर>
एचटीएमएल>

अगला, एक बनाएँ शैली। कम फ़ाइल और निम्नलिखित जोड़ें:

@चौड़ाई:400 पीएक्स;
@ऊंचाई:400 पीएक्स;
@ लंबवत-केंद्र: केंद्र;
@ txt-सफेद: सफ़ेद;
@ बीजी-लाल: आरजीबी (220, 11, 11);
@ फॉन्ट-40:40 पीएक्स;
डिव {
चौड़ाई: @चौड़ाई;
ऊंचाई: @ऊंचाई;
दिखाना: मोड़ना;
रंग: @ txt-सफेद;
पृष्ठभूमि का रंग: @ बीजी-लाल;
फ़ॉन्ट आकार: @ फॉन्ट-40;
}

अब, जब आप संकलन कर सकते हैं ।कम फाइल करने के लिए सीएसएस का उपयोग कम आज्ञा:

कम शैली। कम शैली। सीएसएस

संकलित सीएसएस इस तरह दिखना चाहिए:

डिव {
चौड़ाई: 400पिक्सल;
ऊंचाई: 400पिक्सल;
दिखाना: मोड़ना;
रंग: सफ़ेद;
पृष्ठभूमि का रंग: #dc0b0b;
फ़ॉन्ट आकार: 40पिक्सल;
}

जब आप अपना ब्राउज़र खोलते हैं, तो आपको यह देखना चाहिए:

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

@ कस्टम-चयनकर्ता: कंटेनर;
.@{कस्टम-चयनकर्ता} {
गद्दी: 10 पीएक्स;
अंतर: 10 पीएक्स;
सीमा: ठोस 10 पीएक्स;
}

उपरोक्त कोड ब्लॉक का उपयोग करता है @{...} चयनकर्ता के रूप में एक चर का उपयोग करने के लिए खंड। संकलित होने पर, कोड निम्नलिखित में परिणाम देगा:

कंटेनर{
गद्दी: 10पिक्सल;
अंतर: 10पिक्सल;
सीमा: ठोस 10पिक्सल;
}

कम में अंकगणितीय संक्रियाएँ

लेस जोड़, घटाव, भाग और गुणा जैसे अंकगणितीय कार्यों के लिए भी सहायता प्रदान करता है। ये ऑपरेशन स्थिरांक, मान और चर के साथ काम करते हैं।

@ चर -1:5 पीएक्स;
// चर और स्थिर के बीच गुणा संचालन
@ चर -2:@ चर -1 * 2
// मूल्य और चर के बीच जोड़ संचालन।
@ चर -3:10 पीएक्स + @ चर -2

मिक्सिन्स का उपयोग कैसे करें

मिक्सिन्स आपको स्टाइलशीट में शैलियों (या सीएसएस कोड) का पुन: उपयोग करने की अनुमति देता है। अन्य CSS एक्सटेंशन जैसे Sass मिक्सिन भी पेश करते हैं। यह बताने के लिए कि मिक्सिन्स कम में कैसे काम करते हैं, एक index.htm बनाएं और निम्न कोड जोड़ें:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<मेटाcharset="यूटीएफ-8">
<मेटाHTTP-समतुल्य="एक्स-यूए-संगत"संतुष्ट="आईई = किनारा">
<मेटानाम="व्यूपोर्ट"संतुष्ट="चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1.0">
<जोड़नासंबंधित="शैली पत्रक"href="शैली.सीएसएस">
<शीर्षक>कम सीएसएस का उपयोग करनाशीर्षक>
सिर>
<शरीर>
<डिव>
 लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। सॉलुटा
 आर्किटेक्टो रिपुडिएन्डे इप्सम एनीमी वेलिट आईडी आईएसटीई डोलोरे रेप्रेहेंडिट
 दुख! अपने अपराध को समाप्त करें और बैठें, मान लें कि आप सफल हुए हैं
 सुविधा पूर्ववत।
डिव>
<पी>
 लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। सॉलुटा
 आर्किटेक्टो रिपुडिएन्डे इप्सम एनीमी वेलिट आईडी आईएसटीई डोलोरे रेप्रेहेंडिट
 दुख! अपने अपराध को समाप्त करें और बैठें, मान लें कि आप सफल हुए हैं
 सुविधा पूर्ववत।
पी>
<पी>
 लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। सॉलुटा
 आर्किटेक्टो रिपुडिएन्डे इप्सम एनीमी वेलिट आईडी आईएसटीई डोलोरे रेप्रेहेंडिट
 दुख! अपने अपराध को समाप्त करें और बैठें, मान लें कि आप सफल हुए हैं
 सुविधा पूर्ववत।
पी>
शरीर>
एचटीएमएल>

अगला, एक बनाएँ शैली। कम फ़ाइल और निम्नलिखित पंक्तियाँ जोड़ें:

।सेम्पल विषय() {
पृष्ठभूमि का रंग: पीला;
}
।प्रथम पत्र() {
पृष्ठभूमि का रंग: लाल;
रंग: सफ़ेद;
फ़ॉन्ट आकार: 30 पीएक्स;
}
पी {
।सेम्पल विषय();
}
पी::प्रथम पत्र {
।प्रथम पत्र();
}

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

स्टाइल नेस्टिंग कम में

मान लीजिए कि आपके पास दो तत्वों के साथ माता-पिता div है जो इसके बच्चों के रूप में हैं: ए पी तत्व और दूसरा डिव. आमतौर पर, यदि आप स्टाइल करना चाहते हैं पी लाल रंग के साथ तत्व और डिव हरे रंग वाले तत्व, आप निम्न दृष्टिकोण का उपयोग कर सकते हैं:

डिवपी {
रंग: लाल;
}
डिव {
रंग: हरा
}

लेस के उपयोग के माध्यम से समान कार्यक्षमता प्रदान करता है घोंसला करने की क्रिया. तो इस मामले में, उपरोक्त कोड ब्लॉक का कम समतुल्य होगा:

डिव {
रंग: हरा;
पी {
रंग: लाल;
 }
}

न केवल अपने सिर को चारों ओर लपेटना आसान है, यह कोड को और अधिक बनाए रखने योग्य भी बनाता है। माता-पिता चयनकर्ताओं को कम के साथ संदर्भित करना आसान है & ऑपरेटर। उदाहरण के लिए:

बटन {
पृष्ठभूमि का रंग: नीला;
सीमा: कोई नहीं;
&: होवर {
पृष्ठभूमि का रंग: स्लेटी;
परिवर्तन: पैमाना(1.2);
 }
}

उपरोक्त कोड ब्लॉक संकलित होने पर निम्न सीएसएस कोड का परिणाम देगा:

बटन {
पृष्ठभूमि का रंग: नीला;
सीमा: कोई नहीं;
}
बटन: होवर {
पृष्ठभूमि का रंग: स्लेटी;
परिवर्तन: पैमाना(1.2);
}

कार्यक्षेत्र और कार्यों को कम में समझना

नियमित प्रोग्रामिंग भाषाओं की तरह, वेरिएबल्स में उस ब्लॉक का दायरा होता है जिसमें आप उन्हें परिभाषित करते हैं। इसे दर्शाने के लिए, एक नया बनाएँ index.htm फ़ाइल, और पहले प्रदान किया गया पहला HTML बॉयलरप्लेट कोड जोड़ें। फिर निम्न ब्लॉक को इसमें जोड़ें शरीर उपनाम:

<डिवकक्षा="आउटर-डिव">
 बाहरी Div लाल होना चाहिए।
<बीआर />
<अवधिकक्षा="इनर-डिव">
 इनर डिव हरा होना चाहिए।
अवधि>
डिव>

में शैली। कम फ़ाइल में निम्नलिखित पंक्तियाँ जोड़ें:

@ बीजी-रंग: लाल;
शरीर {
फ़ॉन्ट आकार: 40 पीएक्स;
रंग: सफ़ेद;
अंतर: 20 पीएक्स;
}
.आंतरिक विभाजन {
@ बीजी-रंग: हरा;
पृष्ठभूमि का रंग: @ बीजी-रंग;
}
.बाहरी विभाजन {
पृष्ठभूमि का रंग: @ बीजी-रंग;
}

inner-div ब्लॉक पुनर्परिभाषित करता है bg-रंग चर, केवल उस ब्लॉक के दायरे में। तो हरा रंग सिर्फ उसी वर्ग पर लागू होता है और वैश्विक को प्रभावित नहीं करता है bg-रंग चर। जब आप परिणाम संकलित करते हैं और ब्राउज़र में खोलते हैं, तो आपको यह देखना चाहिए:

लेस आसान कार्य भी प्रदान करता है जो कुछ परिदृश्यों में फायदेमंद हो सकता है। उदाहरण के लिए, यदि आप केवल एक निश्चित शर्त पूरी होने पर ही कोई शैली सेट करना चाहते हैं, तो आप ऐसा कर सकते हैं अगर समारोह। इस फ़ंक्शन में निम्न सिंटैक्स है:

अगर((स्थिति), मान 1, मान 2)

कोड वापस आ जाता है मान 1 अगर शर्त पूरी होती है और मान 2 अन्यथा। यहाँ एक उदाहरण है:

@var1:20 पीएक्स;
@var2:20 पीएक्स;
डिव {
गद्दी: अगर((@var1 = @var2), 10 पीएक्स, 20 पीएक्स);
}

संकलित होने पर उपरोक्त कोड ब्लॉक का परिणाम निम्नलिखित सीएसएस में होना चाहिए:

डिव {
गद्दी: 10पिक्सल;
}

कम और अन्य CSS एक्सटेंशन के साथ अधिक करें

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

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