लेस सीएसएस - शुरुआती गाइड

CSS Pre-processor अब वेब डेवलपमेंट में एक प्रधान बन गया है। यह वैरिएबल, फ़ंक्शंस या मिक्सिन, और ऑपरेशन जैसे प्रोग्रामिंग लक्षणों के साथ सादे सीएसएस को शिप करता है जो वेब डेवलपर्स को बनाने की अनुमति देता है मॉड्यूलर, स्केलेबल, और अधिक प्रबंधनीय सीएसएस शैलियों.

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

संकलक

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

यहाँ LESS कोड पर एक झलक दी गई है:

 @ रंग-आधार: # 2d5e8b; .class1 पृष्ठभूमि-रंग: @ रंग-आधार; .class2 पृष्ठभूमि-रंग: #fff; रंग: @ रंग-आधार;  

कंपाइलर कोड को प्रोसेस करेगा और LESS सिंटैक्स को ब्राउज़र-कंप्लेंट CSS प्रारूप में बदल देगा:

 .class1 पृष्ठभूमि-रंग: # 2d5e8b;  .class1 .class2 बैकग्राउंड-कलर: #fff; रंग: # 2d5e8b;  

CSS को संकलित करने के लिए कई उपकरण हैं:

जावास्क्रिप्ट का उपयोग करना

कम एक के साथ आता है less.js फ़ाइल जो वास्तव में आपकी वेबसाइट में तैनात करने के लिए आसान है। के साथ एक स्टाइलशीट बनाएं .कम से एक्सटेंशन का उपयोग करके इसे अपने दस्तावेज़ में लिंक करें rel = "स्टाइलशीट / कम" गुण.

आप यहां JS फाइल प्राप्त कर सकते हैं, इसे Bower पैकेज मैनेजर के माध्यम से डाउनलोड कर सकते हैं, अन्यथा सीधे CDN से लिंक करें, जैसे:

आप सभी सेट हैं और के भीतर शैलियों की रचना कर सकते हैं .कम से. पृष्ठ लोड होते ही LESS सिंटैक्स को मक्खी पर संकलित किया जाएगा। ध्यान रखें कि जावास्क्रिप्ट का उपयोग उत्पादन स्तर पर हतोत्साहित किया जाता है क्योंकि यह वेबसाइट के प्रदर्शन को बुरी तरह प्रभावित करेगा.

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

सीएलआई का उपयोग करना

LESS एक मूल कमांड लाइन इंटरफेस (सीएलआई) प्रदान करता है, lessc, जो कम से कम सिंटैक्स को संकलित करने से परे कई कार्यों को संभालता है। सीएलआई का उपयोग करके हम कोड को लिंट कर सकते हैं, फ़ाइलों को संपीड़ित कर सकते हैं, और एक स्रोत मानचित्र बना सकते हैं। कमांड Node.js पर आधारित है जो प्रभावी रूप से कमांड को विंडोज, ओएस एक्स और लिनक्स पर काम करने की अनुमति देता है.

सुनिश्चित करें कि Node.js स्थापित किया गया है (अन्यथा यहां इंस्टॉलर को पकड़ो), फिर निम्न कमांड लाइन का उपयोग करके NPM (नोड पैकेज मैनेजर) के माध्यम से LESS CLI स्थापित करें.

 npm स्थापित -g कम 

अब आपके पास है lessc CSS में LESS को संकलित करने के लिए अपने निपटान में कमांड:

 सबक शैली 

टास्क रनर का उपयोग करना

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

इस श्रेणी में दो लोकप्रिय उपकरण आज ग्रंट और गल्प हैं। हमारे पास पोस्ट की एक श्रृंखला है जो इन उपकरणों को कवर करती है। अपने वर्कफ़्लो में इन टूलों को तैनात करने का तरीका जानने के लिए पदों की जाँच करें.

• कैसे अपने वर्कफ़्लो को स्वचालित करने के लिए ग्रन्ट का उपयोग करें
• गुलपजे से आरंभ करना
• बिल्ड लिपियों की लड़ाई: घोल बनाम ग्रंट

आलेखीय अनुप्रयोग का उपयोग करना

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

यहाँ पूरी सूची है:

ऐप	मंच	लागत
मिश्रण	ओएस एक्स / विंडोज	मुक्त
कोअला	ओएस एक्स / विंडोज / लिनक्स	मुक्त
Prepros	ओएस एक्स / विंडोज	फ्रीमियम (USD29)
winless	विंडोज	मुक्त
CodeKit	ओएस एक्स	USD32

कौन सा संकलक आप के लिए चुनते हैं (जावास्क्रिप्ट से अलग) वास्तव में कोई फर्क नहीं पड़ता, स्पष्ट रूप से, इसलिए जब तक उपकरण काम करता है और आपके वर्कफ़्लो को पूरक करता है, इसके लिए जाएं.

कोड संपादक

आप किसी भी कोड संपादक का उपयोग कर सकते हैं। बस उचित रंग के साथ LESS सिंटैक्स को हाइलाइट करने के लिए एक प्लगइन या एक एक्सटेंशन स्थापित करें, एक सुविधा जो अब लगभग सभी कोड संपादकों और IDEs के लिए उपलब्ध है जिसमें SublimeText, Notepad ++, VisualStudio, TextMate और Eclipse शामिल हैं।.

अब जब हमारे पास कंपाइलर और कोड एडिटर हैं, तो हम LESS सिंटैक्स के साथ CSS स्टाइल लिखना शुरू कर सकते हैं.

लेस सिंटेक्स

नियमित सीएसएस के विपरीत, जैसा कि हम जानते हैं, लेस एक प्रोग्रामिंग भाषा की तरह बहुत अधिक काम करता है। यह गतिशील है, इसलिए कुछ शब्दावली खोजने की अपेक्षा करें चर, ऑपरेशन तथा क्षेत्र जिस तरह से साथ.

चर

सबसे पहले, आइए नजर डालते हैं चर.

यदि आप सीएसएस के साथ काफी समय से काम कर रहे हैं, तो आपने संभवतः ऐसा कुछ लिखा है, जहां हमारे पास पूरे स्टाइलशीट में घोषणापत्रों में दोहराए गए मान हैं।.

 .class1 पृष्ठभूमि-रंग: # 2d5e8b;  .class2 पृष्ठभूमि-रंग: #fff; रंग: # 2d5e8b;  .class3 सीमा: 1px ठोस # 2d5e8b;  

यह अभ्यास वास्तव में ठीक है - जब तक हम खुद को अधिक से अधिक झारना नहीं पाते एक हजार या अधिक समान स्निपेट्स पूरे स्टाइलशीट में। बड़े स्तर की वेबसाइट बनाते समय ऐसा हो सकता है। काम थकाऊ हो जाएगा.

अगर हम LESS की तरह CSS पूर्व-प्रोसेसर का उपयोग कर रहे हैं, तो ऊपर दिया गया उदाहरण समस्या नहीं होगा - हम उपयोग कर सकते हैं चर. चर हमें स्टोर करने की अनुमति देंगे निरंतर मान जो बाद में संपूर्ण स्टाइलशीट में पुन: उपयोग किया जा सकता है.

 @ रंग-आधार: # 2d5e8b; .class1 पृष्ठभूमि-रंग: @ रंग-आधार;  .class2 पृष्ठभूमि-रंग: #fff; रंग: @ रंग-आधार;  .class3 बॉर्डर: 1 पीएक्स सॉलिड @ कलर-बेस;  

ऊपर के उदाहरण में, हम रंग जमा करते हैं # 2d5e8b में @ रंग आधार चर। जब आप रंग बदलना चाहते हैं, तो हमें केवल इस चर में मूल्य को बदलना होगा.

रंग के अलावा, आप उदाहरण के लिए अन्य मूल्यों को भी चर में रख सकते हैं:

 @ फ़ॉन्ट-परिवार: जॉर्जिया @ डॉट-बॉर्डर: डॉटेड @transition: रैखिक @opacity: 0.5 

mixins

LESS में, हम उपयोग कर सकते हैं mixins एक अन्य नियम सेट में सीएसएस नियम में पूरी घोषणाओं का पुन: उपयोग करने के लिए। यहाँ एक उदाहरण है:

 .ग्रेडिएंट्स पृष्ठभूमि: #eaeaea; पृष्ठभूमि: रैखिक-ढाल (शीर्ष, #eaea, #cccccc); पृष्ठभूमि: -ओ-लीनियर-ग्रेडिएंट (शीर्ष, #eaea, #cccccc); पृष्ठभूमि: -ms-रैखिक-ढाल (शीर्ष, #eaea, #cccccc); पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, #eaea, #cccccc); पृष्ठभूमि: -webkit-linear-gradient (शीर्ष, #eaea, #cccccc);  

उपरोक्त स्निपेट में, हमने एक डिफ़ॉल्ट निर्धारित किया है ढाल अंदर रंग .ढ़ाल कक्षा। जब भी हम उन ग्रेडिएंट्स को जोड़ना चाहते हैं जिन्हें हम केवल सम्मिलित करते हैं .ढ़ाल इस तरफ:

 div .ग्राहक; बॉर्डर: 1px ठोस # 555; सीमा-त्रिज्या: 3 पीएक्स;  

.डिब्बा के अंदर सभी घोषणा ब्लॉक वारिस होगा .ढ़ाल. तो, ऊपर दिया गया सीएसएस नियम निम्नलिखित सादे सीएसएस के बराबर है:

 div पृष्ठभूमि: #eaeaea; पृष्ठभूमि: रैखिक-ढाल (शीर्ष, #eaea, #cccccc); पृष्ठभूमि: -ओ-लीनियर-ग्रेडिएंट (शीर्ष, #eaea, #cccccc); पृष्ठभूमि: -ms-रैखिक-ढाल (शीर्ष, #eaea, #cccccc); पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, #eaea, #cccccc); पृष्ठभूमि: -webkit-linear-gradient (शीर्ष, #eaea, #cccccc); बॉर्डर: 1px ठोस # 555; सीमा-त्रिज्या: 3 पीएक्स;  

इसके अलावा, यदि आप CSS3 का उपयोग अपनी वेबसाइट में बहुत अधिक कर रहे हैं, तो आप अपने काम को आसान बनाने के लिए LESS तत्वों का उपयोग कर सकते हैं। लेस एलिमेंट्स आम का एक संग्रह है CSS3 मिश्रण हम अक्सर स्टाइलशीट में उपयोग कर सकते हैं, जैसे कि बॉर्डर-त्रिज्या, ढ़ाल, परछाई डालना और इसी तरह.

कम तत्वों का उपयोग करने के लिए, बस जोड़ें @आयात अपनी LESS स्टाइलशीट में नियम बनाएं, लेकिन इसे पहले डाउनलोड करना न भूलें और इसे अपने वर्किंग डायरेक्टरी में जोड़ें.

 @import "elements.less"; 

हम अब सभी का पुन: उपयोग कर सकते हैं कक्षाएं से प्रदान किया गया elements.less, उदाहरण के लिए, जोड़ने के लिए 3px सीमा त्रिज्या में div, हम लिख सकते है:

 div । घिरा (3 पीएक्स);  

आगे के उपयोग के लिए, कृपया आधिकारिक दस्तावेज देखें.

नेस्टेड नियम

जब आप सादे सीएसएस में शैली लिखते हैं, तो आप इन विशिष्ट कोड संरचनाओं के माध्यम से भी आ सकते हैं.

 नौसेना ऊंचाई: 40 पीएक्स; चौड़ाई: 100%; पृष्ठभूमि: # 455868; बॉर्डर-बॉटम: 2px ठोस # 283744;  nav li चौड़ाई: 600px; ऊंचाई: 40 पीएक्स;  nav li a color: #fff; लाइन-ऊँचाई: 40 पीएक्स; पाठ-छाया: 1px 1px 0px # 283744;  

सादे सीएसएस में, हम हर नियम सेट में पहले माता-पिता को लक्षित करके बाल तत्वों का चयन करते हैं, जो यदि हम अनुसरण करते हैं, तो यह काफी हद तक बेमानी है “सर्वोत्तम प्रथाएं” सिद्धांत.

LESS CSS में, हम नियम सेट को सरल बना सकते हैं माता-पिता के अंदर बच्चे के तत्वों को घोंसला बनाना, निम्नलिखित नुसार;

 नौसेना ऊंचाई: 40 पीएक्स; चौड़ाई: 100%; पृष्ठभूमि: # 455868; बॉर्डर-बॉटम: 2px ठोस # 283744; ली चौड़ाई: 600 पीएक्स; ऊंचाई: 40 पीएक्स; a color: #fff; लाइन-ऊँचाई: 40 पीएक्स; पाठ-छाया: 1px 1px 0px # 283744;  

आप भी असाइन कर सकते हैं छद्म कक्षाएं, पसंद : मंडराना, चयनकर्ता एम्परसेंड (और) प्रतीक का उपयोग कर.

मान लीजिए कि हम जोड़ना चाहते हैं : मंडराना ऊपर एंकर टैग के लिए, हम इसे इस तरह से लिख सकते हैं:

 a color: #fff; लाइन-ऊँचाई: 40 पीएक्स; पाठ-छाया: 1px 1px 0px # 283744; &: हॉवर पृष्ठभूमि-रंग: # 000; रंग: #fff;  

ऑपरेशन

हम LESS में ऑपरेशन भी कर सकते हैं, जैसे कि इसके अलावा, घटाव, गुणा और भाग स्टाइलशीट में संख्याओं, रंगों और चर के लिए.

मान लें कि हम चाहते हैं कि तत्व B, तत्व A से दो गुना अधिक हो। उस स्थिति में, हम इसे इस प्रकार लिख सकते हैं:

 @ हाइट: १०० पीएक्स; एलेमेंट-ए ऊंचाई: @ हाइट;  .लेमेंट-बी ऊंचाई: @ हाइट * 2;  

जैसा कि आप ऊपर देख सकते हैं, हम पहले मूल्य को स्टोर करते हैं @ऊंचाई परिवर्तनशील, तो तत्व A को मान असाइन करें.

तत्व बी में, खुद ऊंचाई की गणना करने के बजाय, हम ऊंचाई को 2 से गुणा कर सकते हैं तारांकन ऑपरेटर (*) का उपयोग करना। अब, जब भी हम मूल्य में परिवर्तन करते हैं @ऊंचाई परिवर्तनशील, तत्व बी हमेशा ऊंचाई से दोगुना होगा.

हमारे पिछले ट्यूटोरियल में अधिक उन्नत ऑपरेशन उदाहरण देखें: एक चालाक मेनू नेविगेशन बार डिजाइन करना.

क्षेत्र

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

 शीर्ष लेख @ रंग: काला; पृष्ठभूमि-रंग: @ रंग; नौसेना @ रंग: नीला; पृष्ठभूमि-रंग: @ रंग; एक color: @color;  

ऊपर के उदाहरण में, हैडर एक काली पृष्ठभूमि का रंग, लेकिन एनएवीकी पृष्ठभूमि का रंग होगा नीला जैसा कि इसके स्थानीय दायरे में @ कलर वेरिएबल है, जबकि ए नीला भी होगा जो उसके निकटवर्ती माता-पिता से विरासत में मिला है, एनएवी.

फाइनल थॉट

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

यहाँ कुछ ट्यूटोरियल दिए गए हैं, जो आपको आगे की युक्तियों और प्रथाओं को देखने के लिए प्रोत्साहित करते हैं, जो आपके LESS कौशल को अगले स्तर तक धकेलने में मदद कर सकते हैं.

• कम सीएसएस ट्यूटोरियल: एक चालाक मेनू नेविगेशन बार डिजाइन करना
• लेस कलर फंक्शंस को समझना
• 3 नई कम सीएसएस सुविधाएँ आपको पता होना चाहिए