कम: प्रोग्राम शैली भाषा

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

LESS क्या है?

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

LESS का उपयोग कैसे करें

LESS का उपयोग करने के दो तरीके हैं। आप एक LESS फ़ाइल बना सकते हैं और इसे मक्खी पर जावास्क्रिप्ट का उपयोग करके परिवर्तित कर सकते हैं या पहले से संकलित कर सकते हैं और परिणामी CSS फ़ाइल का उपयोग कर सकते हैं। "संकलन" शब्द से डरो मत (मैं इसे हर समय उपयोग करता हूं), यह बहुत सरल है।

हम LESS और जावास्क्रिप्ट फ़ाइल का उपयोग करते हैं

सबसे पहले आपको फ़ाइल को जावास्क्रिप्ट जावास्क्रिप्ट वेबसाइट से डाउनलोड करना होगा और इसे किसी अन्य js स्क्रिप्ट की तरह पृष्ठ पर संलग्न करना होगा।

<script src="less.js" type="text/javascript"></script> 

फिर एक्सटेंशन के साथ एक फाइल बनाएं। बिना कोड के और इसे निम्नलिखित कोड के साथ संलग्न करें:

 <link rel="stylesheet/less" type="text/css" href="style.less"> 

सुनिश्चित करें कि आप JS से पहले LESS फ़ाइल संलग्न करें।
अब LESS फ़ाइल नियमित सीएसएस की तरह काम करेगी।

LESS फ़ाइल संकलित करना

हालांकि यह तरीका थोड़ा थकाऊ है, कभी-कभी यह अधिक बेहतर होता है। प्रत्येक पृष्ठ लोड पर कोड को परिवर्तित नहीं करने के लिए, आप परिणामस्वरूप सीएसएस फ़ाइल का उपयोग कर सकते हैं। कन्वर्टर्स: विंडोज के लिए - विनलेस और मैक के लिए LESS.app ।

LESS की शक्ति को कम करना

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

चर

LESS में वेरिएबल्स PHP, JS और अन्य प्रोग्रामिंग भाषाओं की तरह ही काम करते हैं। आप मान को संग्रहीत करने के लिए उनका उपयोग कर सकते हैं, और फिर जब भी आपको आवश्यकता होती है तब मूल्य के बजाय चर का उपयोग करें।

 @header-font: Georgia; h1, h2, h3, h4 { font-family: @header-font; } .large { font-family:@header-font; } 

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

 /* Colors for my Website #ff9900 - Orange - used for links and highlighted items #cccccc - Light Gray - used for borders #333333 - Dark Black - Used for dark backgrounds and heading text color #454545 - Mid Black - Used for general text color */ body { background: #333333; color: #454545; } a { color:#ff9900; } h1, h2, h3, h4, h5, h6 { color: #333333; } 

आपके रंगों को यहाँ की तरह दस्तावेज करने में कुछ भी गलत नहीं है, यह अच्छा अभ्यास है, समस्या यह है कि प्रलेखन का आपकी शैलियों की कार्यक्षमता से कोई लेना-देना नहीं है। यदि आप 2000 लाइन की कोड के बाद रंगों को बदलने का निर्णय लेते हैं, और फिर अपना मन 3567 लाइन पर बदलते हैं, तो सभी रंगों और प्रलेखन को ठीक करना बेहद मुश्किल होगा।
कम से कम, हम एक ही समय में अपने वर्कफ़्लो को संशोधित और दस्तावेज़ कर सकते हैं।

 /* Colors for my Website */ @color-orange: #ff9900; @color-gray_light: #cccccc; @color-black_dark: #333333; @color-black_medium: #454545; body { background: @color-black_dark; color: @color-black_medium; } a { color:@color-orange; } h1, h2, h3, h4, h5, h6 { color: @color-black_dark; } 

चर स्कोप

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

 a { @color: #ff9900; color:@color; } button { background: @color; } 

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

 @color: #222222; a { @color: #ffffff; color:@color; } button { background: @color; } 

यहां लिंक को सफेद रंग में चित्रित किया जाएगा, और बटन पर एक काली पृष्ठभूमि होगी।

चर में चर

यदि आप PHP में इनकोडिंग करते हैं, तो आप जानते हैं कि आप दूसरे चर में एक चर नाम की घोषणा कर सकते हैं।

 @color-chirstmas_red: #941f1f; @name-of-color: "color-chirstmas_red"; color: @@name-of-color; 

व्यक्तिगत रूप से, मैं लगभग कभी भी इसका उपयोग नहीं करता हूं, क्योंकि चर में चर बिना क्लोजर के लगभग बेकार हैं, लेकिन मुझे यकीन है कि इसका उपयोग करने के स्मार्ट उदाहरण हैं।

लगातार और चर

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

संचालन

आप लेस में संचालन का उपयोग करके अविश्वसनीय रूप से सटीक नियंत्रण प्राप्त कर सकते हैं। विचार सरल है:

 .button{ @unit: 3px; border:@unit solid #ddd; padding: @unit * 3; margin: @unit * 2; } 

उपरोक्त कोड यूनिट चर को 3px पर सेट करता है। फिर हम इस मान को फ्रेम की चौड़ाई पर सेट करते हैं, इंडेंटेशन चौड़ाई की तीन गुना है, और मार्जिन दो हैं।
आप गुणन, विभाजन, जोड़ और घटाव के संचालन का उपयोग कर सकते हैं। एक फ्रेम के साथ एक ब्लॉक बनाने के लिए जो पक्षों की चौड़ाई को दक्षिणावर्त बढ़ाता है, आप निम्न कोड का उपयोग कर सकते हैं:

 .box{ @base_unit: 1px; border: @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3 } 

रंग प्रबंधन

LESS की मेरी पसंदीदा विशेषता रंग प्रबंधन है। आप रंगों के मिश्रण के लिए संचालन का उपयोग कर सकते हैं और रंग के साथ काम करने के लिए कई विशेष कार्य कर सकते हैं।

रंग संचालन

यदि आप रंग मूल्य बदलना चाहते हैं, तो आप इसे घटाकर या किसी अन्य रंग को जोड़कर कर सकते हैं।

 @color: #941f1f; button { background: #941f1f + #222222; border: #941f1f - #111111; } 

उपरोक्त पृष्ठभूमि ऑपरेशन प्रत्येक HEX मान को 2 से बढ़ाएगा। परिणाम "B64141 increase - मूल रंग का हल्का संस्करण है। एक फ्रेम ऑपरेशन प्रत्येक एचईएक्स मूल्य को 1 से कम करेगा और एक गहरा रंग पैदा करेगा: "830E0E"।
व्यवहार में, ऐसे कई मामले हैं जब हम आधार रंग से शुरू करते हैं और इसे थोड़ा गहरा या हल्का संस्करण की आवश्यकता होती है।

 @color-button: #d24444; input.submit { color:#fff; background:@color-button; border:1px solid @color-button - #222; padding:5px 12px; } 

यह कोड थोड़े काले रंग की सीमा के साथ एक लाल बटन बनाता है। यह एक सामान्य स्थिति है और सिर्फ एक रंग को परिभाषित करना एक बड़ी मदद है।

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

इसका एक और बड़ा उपयोग ग्रेडिएंट बनाने के लिए है। मैं आमतौर पर मध्य रंग का चयन करता हूं और इसके आधार पर ग्रेडिएंट की घोषणा करता हूं। मैं शुरुआत को थोड़ा हल्का और अंत को थोड़ा गहरा बना रहा हूं। परिणाम एक अच्छा संक्रमण होगा, कुछ इस तरह से:

 @color: #faa51a; .button { background: -webkit-gradient(linear, left top, left bottom, from(@color + #151515), to(@color - #151515)); background: -moz-linear-gradient(top, @color + #151515, @color - #151515); } 

रंग कार्य करता है

रंग के साथ काम करने के लिए कई और विकल्प हैं; LESS आपको चैनल स्तर पर उन्हें हेरफेर करने की अनुमति देता है। आप रंगों को हल्का, गहरा, संतृप्त, ब्लीच और घुमा सकते हैं। तस्वीरों के साथ निम्नलिखित उदाहरणों पर एक नज़र डालें, यह समझने के लिए कि उनमें से प्रत्येक क्या करता है।

 @color: #3d82d1; .left_box { background:lighten(@color, 20%); } .right_box { background:darken(@color, 20%); } 

 @color: #3d82d1;.left_box { background: desaturate(@color, 18%); } .middle_box { background: @color; } .right_box { background: saturate(@color, 18%); } 

 @color: #3d82d1;.left_box { background: spin(@color, 25%); } .middle_box { background: @color; } .right_box { background: spin(@color, -25%); } 

रंग जानकारी पुनर्प्राप्त करना

LESS में प्रत्येक रंग को चैनल स्तरों पर नियंत्रण प्रदान करने के लिए HSL (hue, saturation, lightness) में परिवर्तित किया जाता है। इसके लिए धन्यवाद, आप रंगों को अधिक सूक्ष्मता से जोड़ सकते हैं, साथ ही सीधे रंग जानकारी प्राप्त कर सकते हैं।

 @color = #167e8a; hue(@color); saturation(@color); lightness(@color); 

यह बहुत कम लग सकता है - हमें इस जानकारी की आवश्यकता क्यों है जब हम सिर्फ एक एचईएक्स मूल्य दर्ज कर सकते हैं? यदि आप एक सामान्य व्यक्ति हैं, तो आप मक्खी पर HEX रंग को डिक्रिप्ट नहीं कर पाएंगे। HEX मान RGB स्पेक्ट्रम का प्रतिनिधित्व करते हैं: पहले दो वर्ण लाल की मात्रा को नियंत्रित करते हैं, अगले दो को - हरे रंग की मात्रा और अंतिम दो को - नीले रंग की मात्रा को।
यह बहुत स्पष्ट है कि # ff0000 लाल है, क्योंकि यह RGB (255,0,0) है। लाल, बिना हरे और नीले रंग के टन। हालाँकि, यदि आप # 1f6b2d देखते हैं, तो यह समझना मुश्किल होगा कि यह गहरे हरे रंग का है। एचएसएल प्रतिनिधित्व में, ह्यू (टोन) सब कुछ नियंत्रित करता है, आप बस रंग को नाम दे सकते हैं, बाकी सिर्फ टोन सेट करेंगे (यह पूरी तरह से सच नहीं है, लेकिन सब कुछ ठीक वैसे ही होता है)।
इस बात को ध्यान में रखते हुए, यदि आपको # e147d4 जैसा अच्छा मैजेंटा रंग मिल जाए, तो आप बिल्कुल उसी रंग के साथ अलग-अलग रंग आसानी से पा सकते हैं। मान लें कि आप # e147d4 का एक मलाईदार, अधिक पेस्टल संस्करण बनाना चाहते हैं, यहां आप क्या कर सकते हैं:

 @color: #c480bd; .class { background-color: desaturate(spin(@color, 18), 12%);} 

नए रंग में एक ही स्वर होगा, लेकिन विभिन्न संतृप्ति और चमक। परिणाम # c480bf होगा, जो केवल HEX का उपयोग करके # e147d4 से स्विच करना अधिक कठिन है।

कार्यों का संयोजन

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

 @color: #c480bd; .class { background-color: desaturate(spin(@color, 18), 12%);} 

घोंसला करने की क्रिया

CSS लिखते समय हम कैस्केडिंग शैलियों का उपयोग करते हैं। केवल अनुच्छेद के अंदर एक पैराग्राफ के मार्जिन को बदलने के लिए, आप निम्नलिखित कोड का उपयोग कर सकते हैं:

 article.post p{ margin: 0 0 12px 0; } 

इस दृष्टिकोण में कुछ भी गलत नहीं है, लेकिन अगर हमें लिंक, उद्धरण, शीर्षक आदि की शैली को भी बदलना है। केवल लेख के अंदर, आपको प्रत्येक तत्व के लिए उपसर्ग "article.post" का उपयोग करना होगा। यह लेखन कोड को अधिक उबाऊ बनाता है और इसे पढ़ना मुश्किल बनाता है।
कम से कम हम इन नियमों को एम्बेड कर सकते हैं, जो हमें अपनी शैलियों का एक छोटा और अधिक तार्किक संस्करण प्रदान करेगा। उदाहरण के लिए:

 article.post { p{ margin: 0 0 12px 0; } a { color: red; } a:hover { color: blue; } img { float:left; } } 

इंडेंटेशन वैकल्पिक है, लेकिन यह कोड को अधिक पठनीय बनाता है। घोंसले के स्तर सीमित नहीं हैं।

 a { color:red; } p { margin:0px; } article { a { color: green; } p { color: #555; a { color:blue; } } } 

अशुद्धताएँ (मिश्रण)

LESS में अशुद्धियाँ आपको अनावश्यक कोड लिखने से बचाएगी। क्या आपने कभी एक गोल फ्रेम बनाया है जिसमें केवल ऊपरी कोने गोल हैं?

 .tab { -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; } 

और इसलिए हर बार ... LESS के साथ यह सब एक मिश्रण बनाकर बदला जा सकता है। अशुद्धताएं - पुन: प्रयोज्य तत्व जिन्हें एक नियम के रूप में किसी भी तत्व में जोड़ा जा सकता है। और आपको नया सिंटैक्स सीखने की भी आवश्यकता नहीं है।

 .rounded_top { -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; } .tab { background: #333; color:#fff; .rounded_top; } .submit { .rounded_top; } 

उपरोक्त कोड में, हमने शीर्ष कोनों को गोल करने के लिए। .Eded_top तत्व को परिभाषित किया है। जब हम इसे किसी अन्य तत्व के रूप में जोड़ते हैं (देखें .tab) हम अनिवार्य रूप से इसके लिए बनाए गए नियमों को आयात करते हैं। इस वाक्य रचना के लिए धन्यवाद, हम किसी भी तत्व को अशुद्धता के रूप में उपयोग कर सकते हैं।

 .rounded_top { -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; } .tab { background: #333; color:#fff; .rounded_top; } .submit { .tab; background: red; } 

.Submit तत्व के लिए शैलियाँ शीर्ष पर गोल कोनों, सफेद रंग और लाल रंग की पृष्ठभूमि (मूल्य # 333 को फिर से परिभाषित) किया गया है।

मापदंडों के साथ अशुद्धता

मापदंडों के साथ असमानताएं, यह जटिल लगता है, वे समस्या को बहुत सरल तरीके से हल करते हैं। ऊपर के उदाहरणों में, आपने देखा कि हम ऊपरी कोने पर 6px की त्रिज्या वाले तत्व को कैसे परिभाषित कर सकते हैं। और अगर हम 3px की त्रिज्या वाला एक तत्व बनाना चाहते हैं? क्या हमें सभी पिक्सेल मूल्यों के लिए विभिन्न अशुद्धियों की घोषणा करनी चाहिए? बेशक, जवाब नहीं है, हमें मापदंडों के साथ अशुद्धियों का उपयोग करना चाहिए!
वे फ़ंक्शन के समान हैं, क्योंकि जब आप उन्हें कॉल करते हैं, तो आप मान बदल सकते हैं। आइए सीमा-त्रिज्या के साथ उदाहरण को फिर से लिखें कि यह कैसे काम करता है।

 .rounded_top(@radius) { -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius; } .tab { background: #333; color:#fff; .rounded_top(6px); } .submit { .rounded_top(3px); } 

उपरोक्त कोड में, .tab का त्रिज्या 6px है, और .submit तत्व का मान 3px होगा।

मानक मान

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

 .rounded_top(@radius:6px) { -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius; } .tab { background: #333; color:#fff; .rounded_top; } .submit { .rounded_top(3px); } 

इस उदाहरण में .tab को 6px का डिफ़ॉल्ट मान और .submit को 3px मिलेगा।

कई मापदंडों

अधिक जटिल अशुद्धियों को निर्धारित करने के लिए आप कई मापदंडों का उपयोग कर सकते हैं।

 .radius(@radius:6px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .button(@radius:3px, @background: #e7ba64, @padding: 4px) { .radius(@radius); background:@background; border: 1px solid @background - #222; padding: @padding; } .read_more { .button(0px); } 

इस उदाहरण में, .read_more वर्ग 4px इंडेंटेशन, बैकग्राउंड कलर # e7ba64 और बॉर्डर-रेडियस व्री 0px के साथ फॉर्मेट किया गया है।

हम एक समय में सभी तर्कों का उपयोग करते हैं

तर्कों का उपयोग करते समय एक अन्य विकल्प उन्हें गठबंधन करना है। CSS शॉर्टहैंड गुण में कई मान होते हैं, जो एक के बाद एक लिखे जाते हैं।

 div { border:1px solid #bbb; } 

सभी आवश्यक तत्वों को एक ग्रे बॉर्डर सेट करने के लिए, आप इस फ़ंक्शन का उपयोग कर सकते हैं:

 .gray_border(@width: 1px, @type: solid, @color: #bbb){ border:@arguments; } div { .gray_border(2px, dashed); } 

@arguments एक विशेष कीवर्ड है जो दिए गए क्रम में एक के बाद एक सभी मापदंडों को प्रदर्शित करता है। उपरोक्त लेस कोड का परिणाम होगा:

 div { border:2px dashed #bbb; } 

मापदंडों के बिना पैरामीट्रिक अशुद्धियां

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

 .alert { background: red; color: white; padding:5px 12px; } .error_message { .alert; margin: 0 0 12px 0; } 

उपरोक्त कोड का सीएसएस इस तरह होगा:

 .alert { background: red; color: white; padding:5px 12px; } .error_message { background: red; color: white; padding:5px 12px; margin: 0 0 12px 0; } 

.Alert वर्ग को छिपाने के लिए, आपको एक खाली पैरामीटर सेट करना होगा।

 .alert() { background: red; color: white; padding:5px 12px; } .error_message { .alert; margin: 0 0 12px 0; } 

समाप्त सीएसएस निम्नानुसार होगा:

 .error_message { background: red; color: white; padding:5px 12px; margin: 0 0 12px 0; } 

यह मुख्य रूप से CSS फ़ाइल के आकार को कम करने के लिए उपयोग किया जाता है।

नाम स्थान

प्रोग्रामिंग भाषाओं में नाम स्थान आमतौर पर ऐसे समूह तत्वों के लिए उपयोग किया जाता है जो कार्यक्षमता में समान हैं। हम अशुद्धियों के साथ अपने कोड को मिलाकर LESS में इसे प्राप्त कर सकते हैं।

 #my_framework { p { margin: 12px 0; } a { color:blue; text-decoration: none; } .submit { background: red; color: white; padding:5px 12px; } } 

अपने ढांचे के आधार पर एक नई साइट पर काम शुरू करते हुए, आप #my_framework का एक गुच्छा जोड़ सकते हैं और नाम सूची को बंद किए बिना इसका उपयोग कर सकते हैं।

 .submit_button { #my_framework > .submit; } 

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

 #fw_1 { p { margin: 12px 0; } a { color:blue; text-decoration: none; } .submit { background: red; color: white; padding:5px 12px; } } #fw_2 { p { margin: 8px 0; } a { color:red; text-decoration: underline; } .submit { background: blue; color: white; padding:8px 20px; } } .submit_button { #fw_2 > .submit; } 

स्ट्रिंग इंटरपोलेशन

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

 @url: "http://mycompany.com/assets/";background-image: url("@{url}/sprite.png"); 

केंद्रीकृत ढांचा बनाते समय यह उपयोगी हो सकता है।

स्क्रीनिंग

कभी-कभी आपको उन गुणों या मूल्यों का उपयोग करने की आवश्यकता होती है जो सीएसएस (IE के लिए नियम) मान्य नहीं हैं। आपने देखा होगा कि ढाल के उदाहरण में, मैंने इंटरनेट एक्सप्लोरर के उपयोगकर्ताओं की परवाह नहीं की।
यदि आप IE में एक ढाल बनाना चाहते हैं, तो आपको कुछ इस तरह करना चाहिए:

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444'); 

यह CSS मान्य नहीं है, इसलिए LESS संकलन नहीं करेगा। इस स्थिति में, आप इस मान से बच सकते हैं, जो LESS को इसे छोड़ने की अनुमति देता है।

 .button { background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444)); background: -moz-linear-gradient(top, #666666, @color - #444444); filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444')";} 

आपको केवल उद्धरण चिह्नों में अनुभाग को संलग्न करना है और उसके सामने एक टिल्ड लगाना है। यह अनुभाग LESS प्रोसेसर से नहीं गुजरेगा और इसे बाहर नहीं फेंका जाएगा।

आयात

नियमित सीएसएस के साथ, आप फ़ाइलों को आयात कर सकते हैं। LESS आपको निम्नलिखित सिंटैक्स का उपयोग करके CSS और LESS को आयात करने की अनुमति देता है:

 @import "reset.min.css"; @import "framework.less"; @import "widgets"; 

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

टिप्पणी

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

 /* This is my main LESS file. It governs how most of the site looks. /* body { padding:0px; // This resets the body padding } 

क्या याद आ रही है?

इस तथ्य के बावजूद कि लेस स्वादिष्ट है, फिर भी जब आप इसका उपयोग करना शुरू करते हैं, तो कुछ नुकसान होंगे, हालांकि वे बहुत चिंताजनक नहीं हैं।
सुविधाओं में से एक जिसे मैं देखना चाहता हूं वह पूर्व-प्री-प्रोसेसिंग है (मैं सहमत हूं, यह व्यर्थ लगता है)। याद रखें कि तार कैसे बच सकते हैं ताकि विश्लेषक के माध्यम से न गुजरें? वर्तमान विधि अस्थिर रंगों के साथ ग्रेडिएंट के उपयोग की अनुमति नहीं देती है।

 filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20')"; 

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

निष्कर्ष

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

Webdesign.tuts + से एक लेख का अनुवाद