काय कमी सीएसएस आहे. प्रोग्रामेबल शैली भाषा कमी. काय कमी आहे

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

कमी म्हणजे काय? LESS हा CSS चा सुपरसेट आहे. याचा अर्थ असा की कोणताही CSS कोड वैध कमी आहे, परंतु अतिरिक्त कमी घटक कार्य करणार नाहीत साधे CSS. हे उत्तम आहे कारण विद्यमान CSS आधीच वैध LESS कोड आहे, जे नवीन तंत्रज्ञानामध्ये प्रवेश करण्यासाठी अडथळा कमी करते.
LESS CSS मध्ये भरपूर उपयुक्त डायनॅमिक गुणधर्म जोडते. हे व्हेरिएबल्स, ऑपरेशन्स, फंक्शन-सारखे घटक आणि मिक्सन्स सादर करते. मॉड्युलरली स्टाईलशीट लिहिण्यास सक्षम असल्याने तुमचा बराच त्रास वाचेल कमी वापरणे. तुम्ही कमी फाईल तयार करू शकता आणि जेव्हा ती रूपांतरित करू शकता जावास्क्रिप्ट मदतफ्लाय वर किंवा आगाऊ संकलित करा आणि परिणामी वापरा CSS फाइल. "कंपाइल" या शब्दाची भीती बाळगू नका (मी ते नेहमी वापरतो), ते खूप सोपे आहे आणि कमी वापरा जावास्क्रिप्ट फाइलप्रथम, तुम्हाला LESS वेबसाइटवरून Javascript फाईल डाउनलोड करावी लागेल आणि इतर कोणत्याही js स्क्रिप्टप्रमाणे ती पृष्ठाशी लिंक करावी लागेल.

त्यानंतर आपण .less एक्स्टेंशनसह फाईल तयार करू आणि खालील कोड वापरून ती बाइंड करू:

JS च्या आधी तुम्ही कमी फाइल संलग्न केल्याची खात्री करा.
आता LESS फाइल नेहमीच्या CSS प्रमाणे काम करेल.

कमी फाईल संकलित करणे ही पद्धत थोडी अधिक कंटाळवाणी असली तरी, काहीवेळा ती श्रेयस्कर असते. प्रत्येक वेळी पृष्ठ लोड झाल्यावर कोड रूपांतरित होऊ नये म्हणून, तुम्ही परिणामी CSS फाइल वापरू शकता. कन्व्हर्टर्स: Windows साठी - Winless आणि LESS.app for Mac ची कमी शक्ती वापरत आहे शेवटी, चला थोडी मजा करूया - LESS कोड लिहा. तुम्ही पहाल की, कोड वाचायला आणि समजायला खूप सोपा आहे, कारण तो PHP, JS आणि इतर प्रोग्रामिंग भाषांप्रमाणेच CSS व्हेरिएबल्स सारखा सिंटॅक्स वापरतो. तुम्ही त्यांचा वापर मूल्य संचयित करण्यासाठी करू शकता आणि नंतर जेव्हा तुम्हाला आवश्यक असेल तेव्हा मूल्याऐवजी व्हेरिएबल्स वापरू शकता.

@header-font: जॉर्जिया; h1, h2, h3, h4 ( फॉन्ट-फॅमिली: @header-font; ) .large ( font-family:@header-font; )
वरील उदाहरणात, आम्ही व्हेरिएबल @header-font घोषित करतो आणि त्यावर "Georgia" मूल्य लिहितो. आता जेव्हा आम्हाला जॉर्जिया फॉन्ट स्थापित करायचा असेल तेव्हा आम्ही हे व्हेरिएबल वापरू शकतो. Trebuchet MS आमच्या शीर्षलेखांसाठी अधिक योग्य आहे असे जर आम्ही ठरवले, तर आम्हाला संपूर्ण फाईल पाहण्याची गरज नाही, आम्ही फक्त व्हेरिएबलचे मूल्य बदलू.
साइटचे रंग परिभाषित करण्यासाठी मला व्हेरिएबल्सचा चांगला उपयोग आढळला आहे. चांगल्या जुन्या दिवसांमध्ये (जे फार पूर्वी नव्हते) मी असे काहीतरी वापरले:

/* माझ्या वेबसाइटसाठी रंग #ff9900 - ऑरेंज - लिंक्स आणि हायलाइट केलेल्या आयटमसाठी वापरलेले #cccccc - हलका राखाडी - सीमा #333333 साठी वापरला जातो - गडद काळा - गडद पार्श्वभूमी आणि हेडिंग मजकूर रंग #454545 - मिड ब्लॅक - सामान्य मजकुरासाठी वापरला जातो रंग */ शरीर (पार्श्वभूमी: #333333; रंग: #454545; ) a ( रंग:#ff9900; ) h1, h2, h3, h4, h5, h6 ( रंग: #333333; )
तुमच्या रंगांचे अशाप्रकारे दस्तऐवजीकरण करण्यात काहीच गैर नाही कामाची चांगली पद्धत, योग्य कार्यपद्धती, चांगला सराव, समस्या अशी आहे की दस्तऐवजीकरणाचा तुमच्या शैलींच्या कार्यक्षमतेशी काहीही संबंध नाही. जर तुम्ही कोडच्या ओळी 2000 नंतर रंग बदलण्याचा निर्णय घेतला आणि नंतर 3567 ओळीवर तुमचा विचार बदलला, तर सर्व रंग आणि कागदपत्रे दुरुस्त करणे अत्यंत कठीण होईल.
कमी सह आम्ही आमचा कार्यप्रवाह एकाच वेळी सुधारित आणि दस्तऐवजीकरण करू शकतो.

/* माझ्या वेबसाइटसाठी रंग */ @color-orange: #ff9900; @color-gray_light: #cccccc; @color-black_dark: #333333; @color-black_medium: #454545; शरीर (पार्श्वभूमी: @color-black_dark; रंग: @color-black_medium; ) a (रंग:@color-orange; ) h1, h2, h3, h4, h5, h6 ( रंग: @color-black_dark; )

व्हेरिएबल स्कोप व्हेरिएबल स्कोप ते प्रवेशयोग्य असलेल्या ठिकाणांचे वर्णन करते. जर तुम्ही LESS फाईलच्या अगदी सुरुवातीला व्हेरिएबल परिभाषित केले तर ते त्याच्या नंतर लिहिलेल्या कोणत्याही कोडसाठी उपलब्ध असेल.
तुम्ही आतील व्हेरिएबल देखील परिभाषित करू शकता CSS नियम. या प्रकरणात, व्हेरिएबल्स या नियमाच्या बाहेर प्रवेश करण्यायोग्य नसतील; ते स्थानिक पातळीवर वापरले जाऊ शकतात.

A ( @color: #ff9900; रंग:@color; ) बटण (पार्श्वभूमी: @color; )
या उदाहरणात त्रुटीमुळे LESS रूपांतरित होणार नाही, अंतर्गत वापरासाठी रंग परिभाषित केलेला नाही बटण घटक. जर एखादे व्हेरिएबल एखाद्या घटकाच्या बाहेर आणि दुसऱ्या घटकाच्या आत घोषित केले असेल, तर ते केवळ स्थानिक पातळीवर प्रवेशयोग्य असेल.

@color: #222222; a ( @color: #ffffff; रंग:@color; ) बटण (पार्श्वभूमी: @color; )
येथे लिंक पांढऱ्या रंगाची असेल आणि बटणाला काळी पार्श्वभूमी असेल.

व्हेरिएबलमधील व्हेरिएबल्स तुम्ही PHP मध्ये कोड केलेले असल्यास, तुम्हाला माहीत आहे की तुम्ही दुसऱ्या व्हेरिएबलमध्ये व्हेरिएबलचे नाव घोषित करू शकता.

@color-chirstmas_red: #941f1f; @name-of-color: "color-chirsmas_red"; रंग: @@ नाव-रंग;
वैयक्तिकरित्या, मी हे जास्त वापरत नाही कारण व्हेरिएबल्समधील व्हेरिएबल्स बंद केल्याशिवाय जवळजवळ निरुपयोगी आहेत, परंतु मला खात्री आहे की हे वापरण्याची हुशार उदाहरणे असतील.

स्थिरांक आणि व्हेरिएबल्स हे लक्षात घेणे महत्त्वाचे आहे की, तुम्ही आत्ता वाचलेल्या गोष्टींच्या विरूद्ध, कमी मधील चल स्थिरांकांसारखे असतात. याचा अर्थ, व्हेरिएबल्सच्या विपरीत, ते केवळ एकदाच परिभाषित केले जाऊ शकतात. कल्पना सोपी आहे:

बटण (@unit: 3px; सीमा:@unit solid #ddd; पॅडिंग: @unit * 3; समास: @unit * 2; )
वरील कोड युनिट व्हेरिएबल 3px वर सेट करतो. त्यानंतर आम्ही हे मूल्य सीमा रुंदीवर, पॅडिंग या रुंदीच्या तीन पट आणि समास या रुंदीच्या दुप्पट वर सेट करतो.
तुम्ही गुणाकार, भागाकार, बेरीज आणि वजाबाकी या क्रिया वापरू शकता. घड्याळाच्या दिशेने बाजूंची रुंदी वाढवणाऱ्या बॉर्डरसह ब्लॉक तयार करण्यासाठी, तुम्ही खालील कोड वापरू शकता:

बॉक्स (@base_unit: 1px; सीमा: @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3 )

रंग व्यवस्थापन कमी माझे आवडते वैशिष्ट्य रंग व्यवस्थापन आहे. आपण रंग आणि एकाधिक मिक्स करण्यासाठी ऑपरेशन वापरू शकता विशेष कार्येकलर ऑपरेशन्स जर तुम्हाला रंगाचे मूल्य बदलायचे असेल तर तुम्ही ते वजा करून किंवा दुसरा रंग जोडून करू शकता.

@color: #941f1f; बटण (पार्श्वभूमी: #941f1f + #222222; सीमा: #941f1f - #111111; )
वरील पार्श्वभूमी ऑपरेशनमुळे प्रत्येक HEX मूल्य 2 ने वाढेल. परिणाम "B64141" असेल - मूळ रंगाची हलकी आवृत्ती. फ्रेम ऑपरेशन प्रत्येक HEX मूल्य 1 ने कमी करेल आणि अधिक उत्पादन करेल गडद रंग: “830E0E”.
सराव मध्ये, जेव्हा आपण सुरुवात करतो तेव्हा अनेक प्रकरणे असतात मूळ रंगआणि आम्हाला त्याची थोडीशी गडद किंवा हलकी आवृत्ती हवी आहे.

@color-button: #d24444; input.submit (रंग:#fff; पार्श्वभूमी:@color-button; सीमा:1px solid @color-button - #222; padding:5px 12px; )
हा कोड किंचित गडद सीमा असलेले लाल बटण तयार करतो. ही एक सामान्य परिस्थिती आहे आणि फक्त एक रंग ओळखणे ही एक मोठी मदत आहे.

व्हेरिएबल्सची शक्ती खालील मध्ये अधिक स्पष्ट आहे. जर तुम्हाला बटणाचा रंग बदलायचा असेल, तर @color-button चे मूल्य बदला हिरवा रंग, बदलणार नाही फक्त पार्श्वभूमी रंग, परंतु स्ट्रोकला हिरव्या रंगाच्या गडद आवृत्तीसह बदलेल.

याचा आणखी एक चांगला उपयोग म्हणजे ग्रेडियंट तयार करणे. मी सहसा मध्यम रंग निवडतो आणि त्यावर आधारित ग्रेडियंट घोषित करतो. मी सुरुवात थोडीशी हलकी करतो आणि शेवट थोडा गडद करतो. परिणाम एक छान संक्रमण होईल, असे काहीतरी:

@color: #faa51a; .बटण ( पार्श्वभूमी: -वेबकिट-ग्रेडियंट(रेषीय, डाव्या शीर्षस्थानी, डाव्या तळाशी, पासून(@color + #151515), ते(@color - #151515)); पार्श्वभूमी: -moz-रेखीय-ग्रेडियंट(शीर्ष, @color + #151515, @color - #151515); )

रंग कार्ये अनेक आहेत अधिक शक्यतारंगासह काम करण्यासाठी; कमी तुम्हाला ते हाताळण्याची परवानगी देते दुवा पातळी. तुम्ही रंग हलके, गडद, ​​संतृप्त, डिसॅच्युरेट आणि फिरवू शकता. प्रत्येकजण काय करतो हे समजून घेण्यासाठी चित्रांसह खालील उदाहरणे पहा.

@color: #3d82d1; .left_box ( पार्श्वभूमी:lighten(@color, 20%); .right_box (पार्श्वभूमी:गडद(@color, 20%); )

@color: #3d82d1;.left_box (पार्श्वभूमी: desaturate(@color, 18%); .middle_box (पार्श्वभूमी: @color; ) .right_box (पार्श्वभूमी: saturate(@color, 18%); )

@color: #3d82d1;.left_box (पार्श्वभूमी: spin(@color, 25%); .middle_box (पार्श्वभूमी: @color; ) .right_box (पार्श्वभूमी: spin(@color, -25%); )

रंग माहिती काढणे तुम्हाला चॅनेल स्तरांवर नियंत्रण देण्यासाठी कमी मधील प्रत्येक रंग HSL (रंग, संपृक्तता, लाइटनेस) मध्ये रूपांतरित केला जातो. यामुळे रंग अधिक सूक्ष्मपणे हाताळले जाऊ शकतात आणि रंग माहिती थेट मिळवता येते.

@color = #167e8a; hue(@color); संपृक्तता (@ रंग); हलकेपणा (@ रंग);
हे खूप क्षुल्लक वाटू शकते - जेव्हा आम्ही फक्त HEX मूल्य प्रविष्ट करू शकतो तेव्हा आम्हाला या माहितीची आवश्यकता का आहे? जर तुम्ही सामान्य व्यक्ती असाल, तर तुम्ही लगेच HEX रंगाचा उलगडा करू शकणार नाही. HEX मूल्ये RGB स्पेक्ट्रमचे प्रतिनिधित्व करतात: पहिले दोन वर्ण लाल रंगाचे प्रमाण नियंत्रित करतात, पुढील दोन हिरव्या रंगाचे प्रमाण नियंत्रित करतात आणि शेवटचे दोन निळ्या रंगाचे प्रमाण नियंत्रित करतात.
हे अगदी स्पष्ट आहे की #ff0000 लाल आहे, कारण ते RGB(255,0,0) आहे. लाल टोन, हिरवा किंवा निळा नाही. तथापि, जर तुम्हाला #1f6b2d दिसत असेल, तर ते गडद हिरवे आहे हे डिकोड करणे कठीण होईल. HSL नोटेशनमध्ये, hue सर्वकाही नियंत्रित करते, तुम्ही फक्त रंगाचे नाव देऊ शकता आणि बाकीचे फक्त टोन सेट करतील (संपूर्णपणे खरे नाही, परंतु ते कसे कार्य करते).
हे लक्षात घेऊन, जर तुम्हाला #e147d4 सारखा चांगला जांभळा रंग सापडला तर तुम्ही अगदी सहज शोधू शकता विविध रंगअगदी त्याच सावलीसह. समजा तुम्हाला #e147d4 ची क्रीमी, अधिक पेस्टल आवृत्ती तयार करायची आहे, तुम्ही काय करू शकता ते येथे आहे:

नवीन रंगात समान छटा असेल, परंतु भिन्न संपृक्तता आणि चमक असेल. परिणाम #c480bf असेल, जो फक्त HEX वापरून #e147d4 वरून मिळवणे अधिक कठीण आहे.

फंक्शन कॉम्बिनेशन LESS तुम्हाला फंक्शन्समध्ये फंक्शन्स वापरण्याची परवानगी देते, म्हणून जर तुम्हाला रंग डिसॅच्युरेट आणि फिरवायचा असेल तर तुम्ही हे करू शकता:

@color: #c480bd; .वर्ग (पार्श्वभूमी-रंग: desaturate(स्पिन(@color, 18), 12%);)

दरम्यान घरटे CSS लेखनआम्ही कॅस्केडिंग शैली वापरतो. परिच्छेदाचे समास केवळ लेखात बदलण्यासाठी, तुम्ही खालील कोड वापरू शकता:

Article.post p( समास: 0 0 12px 0; )
या दृष्टिकोनात काहीही चुकीचे नाही, परंतु जर आपल्याला दुवे, अवतरण, शीर्षके इत्यादीची शैली देखील बदलण्याची आवश्यकता असेल. फक्त एका लेखात, तुम्हाला प्रत्येक घटकासाठी “article.post” उपसर्ग वापरावा लागेल. हे लेखन कोड अधिक कंटाळवाणे आणि वाचण्यास कठीण बनवते.
आमच्या शैलींची एक छोटी, अधिक तार्किक आवृत्ती देऊन, आम्ही हे नियम कमीत कमी करू शकतो. उदाहरणार्थ:

Article.post ( p( margin: 0 0 12px 0; ) a ( रंग: लाल; ) a:hover ( रंग: निळा; ) img ( फ्लोट: डावीकडे; ) )
इंडेंटेशन आवश्यक नाही, परंतु ते कोड अधिक वाचनीय बनवते. नेस्टिंग पातळी मर्यादित नाहीत.

A ( रंग: लाल; ) p ( समास: 0px; ) लेख ( a ( रंग: हिरवा; ) p ( रंग: #555; a ( रंग: निळा; ) )

Mixins Mixins कमी मध्ये तुम्हाला अनावश्यक कोड टाइप करण्यापासून वाचवतात. तुम्हाला कधी गोलाकार फ्रेम तयार करावी लागली आहे ज्यामध्ये फक्त वरचे कोपरेगोलाकार?

टॅब ( -वेबकिट-बॉर्डर-टॉप-डावी-त्रिज्या: 6px; -वेबकिट-बॉर्डर-शीर्ष-उजवी-त्रिज्या: 6px; -moz-बॉर्डर-त्रिज्या-टॉपलेफ्ट: 6px; -moz-बॉर्डर-त्रिज्या-टॉपराइट: 6px; सीमा-शीर्ष-डावी-त्रिज्या: 6px सीमा-शीर्ष-उजवी-त्रिज्या: 6px)
आणि म्हणून प्रत्येक वेळी... कमी सह, हे सर्व मिक्सिन तयार करून बदलले जाऊ शकते. अशुद्धता हे पुन्हा वापरता येण्याजोगे घटक आहेत जे नियम म्हणून कोणत्याही घटकामध्ये जोडले जाऊ शकतात. आणि तुम्हाला नवीन वाक्यरचना शिकण्याचीही गरज नाही.

गोलाकार_टॉप ( -वेबकिट-बॉर्डर-टॉप-डावी-त्रिज्या: 6px; -वेबकिट-बॉर्डर-शीर्ष-उजवी-त्रिज्या: 6px; -moz-बॉर्डर-त्रिज्या-टॉपलेफ्ट: 6px; -moz-बॉर्डर-त्रिज्या-टॉपराइट: 6px; बॉर्डर-टॉप-डावी-त्रिज्या: 6px; बॉर्डर-टॉप-उजवी-त्रिज्या: ) .टॅब (पार्श्वभूमी: #333; रंग:#fff; .rounded_top; ) .सबमिट करा
वरील कोडमध्ये, आम्ही वरच्या कोपऱ्यांना गोल करण्यासाठी .rounded_top घटक परिभाषित केला आहे. जेव्हा आम्ही ते इतर कोणत्याही घटकामध्ये मिक्सिन म्हणून जोडतो (पहा. टॅब) आम्ही मूलत: आम्ही त्यासाठी तयार केलेले नियम आयात करतो. या वाक्यरचनाबद्दल धन्यवाद, आम्ही मिक्सिन म्हणून कोणतेही घटक वापरू शकतो.

गोलाकार_टॉप ( -वेबकिट-बॉर्डर-टॉप-डावी-त्रिज्या: 6px; -वेबकिट-बॉर्डर-शीर्ष-उजवी-त्रिज्या: 6px; -moz-बॉर्डर-त्रिज्या-टॉपलेफ्ट: 6px; -moz-बॉर्डर-त्रिज्या-टॉपराइट: 6px; बॉर्डर-टॉप-डावी-त्रिज्या: 6px; बॉर्डर-टॉप-उजवीकडे त्रिज्या: 6px; ) .टॅब (पार्श्वभूमी: #333; रंग: #fff; .गोलाकार_टॉप; ) .सबमिट ( .tab; पार्श्वभूमी: लाल; )
element.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; बॉर्डर-टॉप-राइट-रेडियस: @radius; रंग: #fff; .rounded_top(6px); ) .सबमिट करा ( .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; बॉर्डर-टॉप-राइट-रेडियस: @radius; .tab (पार्श्वभूमी: #fff; .rounded_top; ) सबमिट करा ( .rounded_top(3px); )
या उदाहरणात, .tab ला 6px चे डीफॉल्ट मूल्य मिळेल आणि .submit ला 3px चे डीफॉल्ट मूल्य मिळेल.

एकाधिक पॅरामीटर्स तुम्ही अधिक जटिल अशुद्धता ओळखण्यासाठी अनेक पॅरामीटर्स देखील वापरू शकता.

त्रिज्या(@radius:6px) ( -webkit-border-radius: @radius; -moz-border-radius: @radius; सीमा-त्रिज्या: @radius; ) .button(@radius:3px, @background: #e7ba64, @padding: 4px) ( .radius(@radius); पार्श्वभूमी:@background; सीमा: 1px ठोस @background - #222; पॅडिंग: @padding; ) .read_more ( .button(0px); )
या उदाहरणात, class.read_more 4px पॅडिंगसह स्वरूपित केले आहे, पार्श्वभूमी रंग#e7ba64 आणि 0px च्या सीमा-त्रिज्यासह.

सर्व युक्तिवाद एकाच वेळी वापरणे वितर्क वापरताना दुसरा पर्याय म्हणजे त्यांना एकत्र करणे. CSS मधील शॉर्टहँड गुणधर्मांमध्ये एकामागून एक अनेक मूल्ये लिहिली जातात.

Div ( सीमा: 1px घन #bbb; )
सगळ्यांना विचारायला आवश्यक घटकराखाडी सीमा, आपण यासारखे कार्य वापरू शकता:

ग्रे_बॉर्डर (@रुंदी: 1px, @प्रकार: घन, @color: #bbb)( सीमा:@arguments; ) div ( .gray_border(2px, डॅश); )
@arguments हा एक विशेष कीवर्ड आहे जो सर्व पॅरामीटर्स एक एक करून आउटपुट करतो दिलेल्या क्रमाने. वरील कमी कोडचा परिणाम असा असेल:

Div ( सीमा: 2px डॅश #bbb; )

पॅरामीटर्सशिवाय पॅरामेट्रिक मिक्सन्स तुम्ही पॅरामीटर्सशिवाय पॅरामेट्रिक मिक्सन्स देखील वापरू शकता. जेव्हा तुम्हाला CSS मध्ये मिक्सिन आउटपुट करण्याची आवश्यकता नसते तेव्हा हे वापरले जाते, परंतु ज्या घटकामध्ये ते वापरले जाते त्यावर त्याचे नियम लागू करायचे असतात.

सूचना (पार्श्वभूमी: लाल; रंग: पांढरा; पॅडिंग: 5px 12px; ) .error_message ( .alert; margin: 0 0 12px 0; )
वरील कोडचा CSS असा असेल:

सूचना (पार्श्वभूमी: लाल; रंग: पांढरा; पॅडिंग: 5px 12px; ) .error_message (पार्श्वभूमी: लाल; रंग: पांढरा; पॅडिंग: 5px 12px; समास: 0 0 12px 0; )
.alert क्लास लपविण्यासाठी तुम्हाला पॅरामीटर रिक्त वर सेट करणे आवश्यक आहे.

Alert() (पार्श्वभूमी: लाल; रंग: पांढरा; पॅडिंग: 5px 12px; ) .error_message ( .alert; margin: 0 0 12px 0; )
पूर्ण झालेले CSS असे दिसेल:

त्रुटी_संदेश (पार्श्वभूमी: लाल; रंग: पांढरा; पॅडिंग: 5px 12px; समास: 0 0 12px 0; )
हे प्रामुख्याने कमी करण्यासाठी वापरले जाते CSS आकारफाइल

नेमस्पेस प्रोग्रामिंग भाषांमध्ये नेमस्पेस सामान्यतः समान कार्यक्षमतेच्या घटकांचे गट करण्यासाठी वापरले जाते. आम्ही आमचा कोड मिक्सिन्ससह एकत्र करून कमी प्रमाणात काहीतरी साध्य करू शकतो.

#my_framework ( p ( समास: 12px 0; ) a ( रंग: निळा; मजकूर-सजावट: काहीही नाही; ) .सबमिट करा (पार्श्वभूमी: लाल; रंग: पांढरा; पॅडिंग: 5px 12px; ) )
तुमच्या फ्रेमवर्कवर आधारित नवीन साइटवर काम सुरू करताना, तुम्ही #my_framework लिंक जोडू शकता आणि नेमस्पेस बंद न करता त्याचा वापर करू शकता.

सबमिट_बटण ( #my_framework > .submit; )
तसेच हे उत्तम मार्गत्वरीत विषय बदलणे आणि परिष्कृत करणे शक्य करा. तुम्ही तुमच्या कंपनीसाठी अनेक थीम विकसित करत असल्यास, फ्लायवर टेम्पलेट्स बदलण्यासाठी, तुम्ही बंडल वापरून ते सर्व एका कमी फाइलमध्ये ठेवू शकता.

#fw_1 ( p ( समास: 12px 0; ) a ( रंग: निळा; मजकूर-सजावट: काहीही नाही; ) .सबमिट करा (पार्श्वभूमी: लाल; रंग: पांढरा; पॅडिंग: 5px 12px; ) ) #fw_2 ( p ( समास: 8px ०;

स्ट्रिंग इंटरपोलेशन स्ट्रिंग इंटरपोलेशन हा आणखी एक फॅन्सी शब्द आहे ज्याचा अर्थ असा होतो अनियंत्रित स्ट्रिंगव्हेरिएबलमध्ये साठवले जाऊ शकते आणि नंतर प्रॉपर्टी व्हॅल्यूमध्ये वापरले जाऊ शकते.

@url: "http://mycompany.com/assets/";background-image: url("@(url)/sprite.png");
केंद्रीकृत फ्रेमवर्क तयार करताना हे उपयुक्त ठरू शकते.

एस्केपिंग कधीकधी तुम्हाला वैध CSS (IE नियम) नसलेली गुणधर्म किंवा मूल्ये वापरण्याची आवश्यकता असते. तुमच्या लक्षात आले असेल की ग्रेडियंटच्या उदाहरणात मी इंटरनेट एक्सप्लोरर वापरकर्त्यांची काळजी घेतली नाही.
जर तुम्हाला IE मध्ये ग्रेडियंट तयार करायचा असेल तर तुम्ही असे काहीतरी केले पाहिजे:

फिल्टर: progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444");
हे CSS वैध नाही, त्यामुळे कमी संकलित होणार नाही. या प्रकरणात, आपण हे मूल्य सोडू शकता, जे कमी वगळण्याची अनुमती देईल.

बटण (पार्श्वभूमी: -वेबकिट-ग्रेडियंट(रेखीय, डावीकडे वर, डावीकडे तळाशी, पासून(#666666), ते(#444444)); पार्श्वभूमी: -moz-लिनियर-ग्रेडियंट(शीर्ष, #666666, @color - #444444) फिल्टर: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444")";)
तुम्हाला फक्त विभागाभोवती अवतरण चिन्हे लावायची आहेत आणि त्यासमोर टिल्ड लावायचे आहे. हा विभाग कमी प्रोसेसरमधून जाणार नाही आणि टाकून दिला जाणार नाही.

नियमित CSS प्रमाणे आयात करा, तुम्ही फाइल्स आयात करू शकता. LESS तुम्हाला खालील वाक्यरचना वापरून CSS आणि LESS आयात करण्यास अनुमती देते:

@import "reset.min.css"; @import "framework.less"; @import "विजेट्स";
प्रथम आयात अगदी स्पष्ट आहे. ते कमी पार्सरद्वारे प्रक्रिया न करता reset.min.css मध्ये परिभाषित केलेले CSS नियम आयात करते.
दुसरा आयात framework.less ची सामग्री समाविष्ट करेल आणि इतर कोणत्याही कमी नियमांप्रमाणे वागेल.
तिसरी आयात दुसऱ्या प्रमाणेच कार्य करते. जर एक्स्टेंशन इन्स्टॉल नसेल, तर प्रीप्रोसेसर त्याला कमी फाइल मानतो.

टिप्पण्या स्वाभाविकच, CSS प्रमाणेच मल्टी-लाइन टिप्पण्या कमी मध्ये उपलब्ध आहेत. कमी वापरण्यास देखील अनुमती देते एका ओळीच्या टिप्पण्यादुहेरी बॅकस्लॅश वापरून PHP किंवा Javascript प्रमाणे.

/* ही माझी मुख्य कमी फाईल आहे. बहुतेक साइट कशी दिसते हे ते नियंत्रित करते. /* बॉडी (पॅडिंग:0px; // हे बॉडी पॅडिंग रीसेट करते)

काय गहाळ आहे? जरी कमी आश्चर्यकारक असले तरी, आपण ते वापरण्यास प्रारंभ करता तेव्हा अजूनही काही कमतरता आहेत, जरी त्या फार त्रासदायक नसल्या तरी.
मला पहायची असलेली वैशिष्ट्ये म्हणजे प्री-प्रोसेसिंग (मी सहमत आहे, ते निरर्थक वाटते) लक्षात ठेवा की स्ट्रिंग्स पार्सरमधून कसे बाहेर जाऊ शकत नाहीत? सध्याची पद्धत बदलण्यायोग्य रंगांसह ग्रेडियंट वापरण्याची परवानगी देत ​​नाही.

फिल्टर: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="#faa51a", endColorstr="#f47a20"");
हा कोड उत्तम काम करतो, परंतु रंग काटेकोरपणे परिभाषित केले पाहिजेत. जर ओळ सुटली असेल, तर व्हेरिएबल्सवर प्रक्रिया केली जात नाही. CSS फाइलवर पाठवण्यापूर्वी एस्केप्ड स्ट्रिंगमधील व्हेरिएबल्सवर प्रक्रिया केली जाते असा पर्याय असल्यास छान होईल.

निष्कर्ष कोणत्याही प्रमाणे नवीन तंत्रज्ञानकिंवा पद्धतीचा गैरवापर होतो. वेब 2.0 युगाच्या प्रारंभी प्रतिबिंबित लोगो आणि काचेची बटणे लक्षात ठेवा?
तुम्हाला तुमचे सर्व नियम नेस्ट करण्याची गरज नाही, तुम्हाला प्रत्येक गोष्टीसाठी व्हेरिएबल्स किंवा फक्त फ्रेम रुंदीसाठी मिक्सिन तयार करण्याची गरज नाही.
LESS ची आश्चर्यकारक शक्ती केव्हा वापरायची नाही हे तुम्हाला माहीत नसेल, तर तुमचा कमी कोड नियमित CSS प्रमाणेच वाचता येणार नाही आणि राखणे तितकेच कठीण होईल. ही फंक्शन्स आणि पद्धती केव्हा वापरायच्या आणि नेहमीच्या केव्हा वापरायच्या हे जाणून घेण्याची युक्ती आहे जुना CSSचांगले
याव्यतिरिक्त, मी कमी फाईल वापरण्याविरुद्ध सल्ला देतो. यात काहीही चुकीचे नाही, परंतु कमी फाइल लोड करण्याचे आणि त्यावर प्रक्रिया करण्याचे कोणतेही कारण नाही. निःसंशयपणे, स्क्रिप्ट खूप वेगवान आहे, परंतु मला खात्री आहे की त्याशिवाय ते वेगवान होईल. मी सहसा माझ्या सर्व साइट्स कमी विकसित करतो, आउटपुट फाइल घेतो, ती कॉम्प्रेस करतो आणि नियमित CSS फाइल वापरतो.

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

तथापि, त्याच्या सर्व निःसंशय फायद्यांसाठी, CSS चे काही, तोटे देखील नाहीत, परंतु मर्यादा आहेत. या मर्यादा गंभीर नाहीत, परंतु प्रकल्प विकासाचा कालावधी लक्षणीयरीत्या वाढवू शकतात.

हे कोणते निर्बंध असू शकतात? उदाहरणार्थ, रंग. जर आपल्याला #FF9F94 सारखी एंट्री दिसली, तर त्याचा अर्थ गडद पीच रंग आहे हे लगेच स्थापित करणे अशक्य आहे. व्हेरिएबल तयार करणे खूप सोपे आहे, उदाहरणार्थ darkPeach, त्याला #FF9F94 मूल्य नियुक्त करा आणि नंतर स्टाईल शीटमध्ये हे व्हेरिएबल वापरा. यामुळे कोणत्या सुविधा मिळू शकतात: संपूर्ण टेबलमध्ये एक रंग बदलण्यासाठी तुम्हाला रंग कोड लक्षात ठेवण्याची गरज नाही, तुम्हाला फक्त व्हेरिएबलचे मूल्य बदलण्याची आवश्यकता आहे.

दुसऱ्या शब्दांत, CSS सोबत काम करणे अधिक व्यावहारिक बनवण्यासाठी प्रोग्रामिंग आणि तर्कशास्त्राचा अभाव आहे. यासाठी कमी साधनांसह अनेक साधने आहेत हे चांगले आहे.

कमी म्हणजे काय?

LESS ही डायनॅमिक शैलीची भाषा आहे, CSS वर एक प्रकारची ऍड-ऑन जी CSS मध्ये डायनॅमिक गुणधर्मांचा विशिष्ट संच जोडते: व्हेरिएबल्स, मिक्सिन, ऑपरेशन्स, फंक्शन्स इ.

LESS ही एक स्क्रिप्ट आहे जी क्लायंटच्या बाजूला (सीएसएस टेबल वापरकर्त्याच्या ब्राउझरमध्ये मोजली जाते) आणि बाजूला दोन्ही वापरली जाऊ शकते. तथापि, कमी वापरण्याचे चांगले मार्ग आहेत, जसे की टेबल पूर्व-संकलित करणे. या प्रकरणात, आपण एक मानक शैली पत्रक मिळवू शकता जे ब्राउझरद्वारे योग्यरित्या वापरले जाईल आणि आपल्याला ते सतत रूपांतरित करण्याची आवश्यकता नाही.

चल

कमी मधील व्हेरिएबल्स इतर प्रोग्रामिंग भाषांप्रमाणेच कार्य करतात. तुम्ही व्हेरिएबल तयार करता, त्याला मूल्य नियुक्त करता आणि नंतर तुम्ही ते कोणत्याही CSS नियमात वापरू शकता. उदाहरणार्थ:

@serif-font: जॉर्जिया; h1, h2, h3, h4 (font-family: @serif-font;).large-text (font-family: @serif-font;)

IN या प्रकरणात@serif-font व्हेरिएबल फॉन्टचे नाव संग्रहित करते. जर तुम्हाला जॉर्जिया फॉन्ट टाइम्स न्यू रोमनमध्ये बदलण्याची आवश्यकता असेल, तर फक्त व्हेरिएबलचे मूल्य बदला आणि फॉन्ट मूल्य संपूर्ण दस्तऐवजात बदलेल. कलर कोडसह व्हेरिएबल्स वापरणे अधिक सोयीचे आहे. उदाहरणार्थ, खालील CSS स्निपेट

मुख्य भाग (रंग: #ff9900; पार्श्वभूमी-रंग:#cccccc;) p (रंग: #ff9900;) h1 (रंग: #ff9900;)

खालील सह बदलले जाऊ शकते:

@color-narange: #ff9900; @color-gray: #cccccc; शरीर (रंग: @color-orange; पार्श्वभूमी-रंग: @color-gray;) p (रंग: @color-orange;) h1 (रंग: @color-orange;)

तुम्ही बघू शकता, तुम्हाला फक्त तुमच्या CSS दस्तऐवजाच्या डोक्यात रंग दुरुस्त करायचा आहे आणि ते संपूर्ण दस्तऐवजात दुरुस्त करा.

व्हेरिएबल्सना स्कोप असतात. प्रत्येक नियमामध्ये, तुम्ही त्या नियमासाठी व्हेरिएबलचे मूल्य पुन्हा नियुक्त करू शकता. IN खालील उदाहरणलिंकचा रंग पांढरा असेल आणि बटणाचा पार्श्वभूमी रंग राखाडी असेल:

@color: #ssssss; a (@color: #ffffff; रंग:@color;) बटण (पार्श्वभूमी: @color;)

हे लक्षात घेणे महत्त्वाचे आहे की LESS मधील व्हेरिएबल्स स्थिरांकांच्या अगदी जवळ आहेत, कारण त्यांना कोडच्या खाली पुन्हा नियुक्त करणे अशक्य आहे, फक्त काही नियमांनुसार.

ऑपरेशन्स

LESS तुम्हाला नियमांच्या आत ऑपरेशन्स वापरण्याची परवानगी देते, जे तुम्हाला मूल्यांवर अचूक नियंत्रण मिळवू देते:

बटण (@unit: 3px; सीमा:@unit solid #ddd; पॅडिंग: @unit * 3; समास: @unit * 2; )

जसे तुम्ही वरील कोडवरून पाहू शकता, @unit व्हेरिएबल 3px वर सेट केले आहे. ते सीमा रुंदीच्या मूल्यामध्ये बदलले आहे. या मूल्याचा 3 किंवा 2 ने गुणाकार करून अनुक्रमे इंडेंटेशन प्राप्त केले जातात.

सर्व अंकगणित ऑपरेशन्स कमी वापरल्या जाऊ शकतात. केवळ संख्यात्मक मूल्येच नाही तर रंग देखील ऑपरेंड म्हणून कार्य करू शकतात. तथाकथित रंग मिक्सिंग करा. जर तुम्हाला रंगाचे मूल्य बदलायचे असेल, तर तुम्ही दुसरे रंग मिसळून किंवा वजा करून करू शकता:

बटण (पार्श्वभूमी: #941f1f + #222222; सीमा: #941f1f - #111111; )

वरील पार्श्वभूमी ऑपरेशनमुळे प्रत्येक HEX मूल्य 2 ने वाढेल. परिणाम #B64141 असेल - मूळ रंगाची हलकी आवृत्ती. सीमा ऑपरेशन प्रत्येक HEX मूल्य 1 ने कमी करेल आणि गडद रंग तयार करेल: #830E0E. सराव मध्ये, अशी अनेक प्रकरणे आहेत जेव्हा आपण मूळ रंगाने सुरुवात करतो आणि त्याची थोडीशी गडद किंवा हलकी आवृत्ती आवश्यक असते.

रंगासह कार्य करणे

रंगासह काम करण्यासाठी इतर शक्यता आहेत. तुम्ही रंग हलके, गडद, ​​संतृप्त, डिसॅच्युरेट आणि फिरवू शकता. रंग फंक्शन्स वापरून हे साध्य केले जाते.

वापराच्या उदाहरणांसाठी आणि परिणाम प्रदर्शित करण्यासाठी, खालील सारणी पहा:

@color: #3d82d1; .left_box ( पार्श्वभूमी:lighten(@color, 20%); .right_box (पार्श्वभूमी:गडद(@color, 20%); )
@color: #3d82d1;.left_box (पार्श्वभूमी: desaturate(@color, 18%); .middle_box (पार्श्वभूमी: @color; ) .right_box (पार्श्वभूमी: saturate(@color, 18%); )
@color: #3d82d1;.left_box (पार्श्वभूमी: spin(@color, 25%); .middle_box (पार्श्वभूमी: @color; ) .right_box (पार्श्वभूमी: spin(@color, -25%); )

तुम्हाला चॅनेल स्तरांवर नियंत्रण देण्यासाठी कमी मधील प्रत्येक रंग HSL (रंग, संपृक्तता, हलकीपणा) मध्ये रूपांतरित केला जातो. हे आपल्याला रंग अधिक सूक्ष्मपणे हाताळण्याची तसेच थेट रंग माहिती प्राप्त करण्यास अनुमती देते:

@color = #167e8a; hue(@color); संपृक्तता (@ रंग); हलकेपणा (@ रंग);

ते कशासाठी आहे? HEX कोडसह कोणता रंग कूटबद्ध केला आहे हे ओळखणे सामान्य व्यक्तीसाठी कठीण आहे, परंतु LESS स्वतः कोडसह कार्य करत नाही, परंतु तो सेट केलेल्या टोनसह कार्य करतो. समजा तुम्हाला आवडणारा जांभळा रंग सापडला आहे (#e147d4). परंतु आता आपल्याला क्रीमियर सावलीची आवश्यकता आहे, नंतर दोन फंक्शन्सची खालील रचना आपल्याला मदत करेल:

@color: #c480bd; .वर्ग (पार्श्वभूमी-रंग: desaturate(स्पिन(@color, 18), 12%);)

घरटी

CSS चा मुख्य फायदा म्हणजे त्याची शैली अपडेट करण्याची कॅस्केडिंग क्षमता. म्हणजेच, लेखाच्या कंटेनरमध्ये परिच्छेदाची शैली सेट करण्यासाठी, तुम्हाला कोड वापरण्याची आवश्यकता आहे:

लेख p ( …)

आणि ते चांगले आहे, परंतु जर तुम्हाला या ब्लॉकमधील घटकांसाठी आणखी काही शैली सेट करण्याची आवश्यकता असेल तर? मग नियम परिभाषित करणे सुरू करण्यापूर्वी तुम्हाला सतत .article जोडावे लागेल. LESS तुम्हाला एकमेकांमध्ये शैली नेस्ट करण्याची परवानगी देते, ज्यामुळे कोड लिहिणे सोपे होते:

A ( रंग: लाल; ) p ( समास: 0px; ) लेख ( a ( रंग: हिरवा; ) p ( रंग: #555; a ( रंग: निळा; ) )

इंडेंटेशन पर्यायी आहे, परंतु ते कोडची वाचनीयता सुधारते. नेस्टिंग पातळी मर्यादित नाहीत.

मिक्सन्स

गोलाकार शीर्ष कोपऱ्यांसह फ्रेम तयार करण्यासाठी, तुम्हाला खालील कोड वापरण्याची आवश्यकता असेल:

टॅब ( -वेबकिट-बॉर्डर-टॉप-डावी-त्रिज्या: 6px; -वेबकिट-बॉर्डर-शीर्ष-उजवी-त्रिज्या: 6px; -moz-बॉर्डर-त्रिज्या-टॉपलेफ्ट: 6px; -moz-बॉर्डर-त्रिज्या-टॉपराइट: 6px; सीमा-शीर्ष-डावी-त्रिज्या: 6px सीमा-शीर्ष-उजवी-त्रिज्या: 6px)

आणि कोडचा हा भाग प्रत्येक वेळी अशी गोलाकार करणे आवश्यक असताना पुन्हा लिहिणे आवश्यक आहे. हे यासह सरलीकृत केले जाऊ शकते कमी वापरणे. हे करण्यासाठी आपल्याला मिश्रण तयार करणे आवश्यक आहे. उदाहरण पहा:

गोलाकार-शीर्ष ( -वेबकिट-बॉर्डर-टॉप-डावी-त्रिज्या: 6px; -वेबकिट-बॉर्डर-शीर्ष-उजवी-त्रिज्या: 6px; -moz-बॉर्डर-त्रिज्या-टॉपलेफ्ट: 6px; -moz-बॉर्डर-त्रिज्या-शीर्ष उजवीकडे: 6px; बॉर्डर-टॉप-डावी-त्रिज्या: 6px; .टॉप (पार्श्वभूमी: #333; रंग:#fff; .शीर्ष; )

या प्रकरणात, आम्ही गोलाकार-शीर्ष वर्ग तयार केला आणि परिभाषित केला आणि नंतर त्याचे सर्व नियम आयात केले वर्ग शीर्ष. आणि पार्श्वभूमी आणि मजकूर रंगाच्या नियमांसह, शीर्ष श्रेणीच्या सर्व शैली सबमिट वर्गात आयात केल्या जातात.

तुम्ही सामान्यतः समान सीमा-त्रिज्या वापरत असल्यास, परंतु काहीवेळा वेगळ्याची आवश्यकता असल्यास, तुम्ही मिश्रण एका मानक मूल्यावर सेट केले पाहिजे.

गोलाकार-शीर्ष(@radius:6px) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius-top-right-radius: @radius (पार्श्वभूमी: #333; रंग:#fff; .गोलाकार - शीर्ष; ) .सबमिट ( .गोलाकार-टॉप (3px); )

या प्रकरणात, टॅब वर्ग 6px चे मूल्य वापरेल आणि सबमिट वर्ग 3px चे मूल्य वापरेल. अनेक पॅरामीटर्स असू शकतात.

शेवटी, हे लक्षात घेतले पाहिजे की कमी मूल्य असूनही, इतर कोणत्याही तंत्रज्ञानाप्रमाणे, ते नेहमी शहाणपणाने वापरले पाहिजे आणि ज्या परिस्थितीत नियमित CSS वापरणे अधिक सोयीचे असेल अशा परिस्थितीत त्याचा गैरवापर केला जाऊ नये. तथापि, ज्या परिस्थितीत कमी योग्य आहे, ते एक अपरिहार्य आणि उपयुक्त साधन असेल.

CSS - साधे आणि प्रवेश करण्यायोग्य साधन. तथापि, त्याच्या मर्यादा आहेत, विशेषत: जेव्हा समर्थनाचा प्रश्न उद्भवतो तयार कोड. जेव्हा तुम्हाला एकाहून अधिक फाइल्समध्ये पसरलेल्या हजारो स्टाईल लाइन्समध्ये सुधारणा करण्याची आवश्यकता असते, तेव्हा हे कार्य एक आव्हान बनते.

समस्यांवर मात करण्यासाठी तयार केले CSS प्रीप्रोसेसर, जे तुम्हाला डायनॅमिकली शैली एकत्र करण्यास अनुमती देतात. अनेक पर्याय आहेत (उदाहरणार्थ, LESS आणि SASS), परंतु या ट्यूटोरियलमध्ये आपण LESS पाहू.

कमी संपादक

हे ट्यूटोरियल लिहिताना, कमी फाइल्ससह काम करण्यासाठी पूर्णपणे समर्पित फक्त एकच संपादक होता - ChrunchApp. हा अनुप्रयोगक्रॉस प्लॅटफॉर्म, Adobe Air वर बनवलेले, ते Windows वर चालवता येते, मॅक OSXआणि लिनक्स.

इतर संपादकांसाठी (जसे की Dreamweaver, Coda, NotePad++ आणि SublimeText 2) प्लगइन किंवा ॲड-ऑन आहेत जे तुम्हाला कमी वाक्यरचना हायलाइटिंग प्रदान करण्याची परवानगी देतात.

कमी वापरणे

कमी वापरण्यास अतिशय सोपे आहे. तुम्हाला तुमच्या हेड टॅगमध्ये फक्त दोन ओळी जोडण्याची गरज आहे HTML दस्तऐवज. पहिल्या ओळीत तुमच्या .less फाइलचे नाव आहे आणि दुसऱ्या ओळीत less.js लायब्ररीचे कनेक्शन आहे (ते अधिकृत वेबसाइटवरून डाउनलोड केले जाऊ शकते).

आपल्या धड्यात आपण दुसरा मार्ग दाखवू. आम्ही LESS कंपाइलर वापरू: Windows साठी आम्ही WinLess वापरू शकतो आणि Mac OSX साठी आम्ही LESS.app वापरू शकतो.

कार्यरत निर्देशिकेत .less फाइल तयार करा. नंतर कंपाइलर (WinLESS किंवा LESS.app) उघडा आणि त्यामध्ये कार्यरत निर्देशिका आयात करा. कंपाइलरला सर्व .less फाईल्स सापडतील. इतकंच. आता, जेव्हाही आपण .less फाइल बदलतो, तेव्हा कंपाइलर आपोआप नियमित CSS कोड .css फाईलमध्ये तयार करेल जी ब्राउझरद्वारे स्वीकारली जाते.

सीएसएस फाइलला एचटीएमएल डॉक्युमेंटशी बांधण्यासाठी जे काही उरले आहे:

कमी वाक्यरचना

नियमित CSS च्या विपरीत, कमी ही प्रोग्रामिंग भाषेसारखी असते. ते डायनॅमिक आहे, त्यामुळे व्हेरिएबल्स, ऑपरेशन्स आणि स्कोप वापरण्याची अपेक्षा करणे तर्कसंगत आहे.

चल

चला प्रथम व्हेरिएबल्स पाहू.

CSS सोबत काम करताना, तुम्हाला बहुधा अशी परिस्थिती आली असेल जिथे स्टाइलशीटमध्ये एकाधिक ब्लॉक्समध्ये पुनरावृत्ती मूल्य सेट केले जाते.

वर्ग1 ( पार्श्वभूमी-रंग: #2d5e8b; ) .वर्ग2 (पार्श्वभूमी-रंग: #fff; रंग: #2d5e8b; ) .वर्ग3 ( सीमा: 1px घन #2d5e8b; )

मूल्य बदलण्यासाठी तुम्हाला संपूर्ण स्टाईल शीटमध्ये कोडचे 1000 समान विभाग चाळावे लागेपर्यंत सर्व काही छान आहे. मोठ्या प्रकल्पावर काम करताना ही परिस्थिती उद्भवू शकते.

LESS प्रीप्रोसेसर वापरताना, व्हेरिएबल्स वापरून ही समस्या सहजपणे सोडवली जाते. व्हेरिएबल्स तुम्हाला स्टाइल शीटमध्ये पुन्हा वापरता येणारी मूल्ये साठवण्याची परवानगी देतात.

@color-base: #2d5e8b; .class1 ( पार्श्वभूमी-रंग: @color-base; ) .class2 (पार्श्वभूमी-रंग: #fff; रंग: @color-base; ) .class3 ( सीमा: 1px घन @color-base; )

वरील उदाहरणात, @color-base व्हेरिएबल #2d5e8b मूल्य संचयित करते. आणि जेव्हा तुम्हाला रंग बदलण्याची आवश्यकता असेल, तेव्हा तुम्हाला फक्त व्हेरिएबलमधील मूल्य बदलण्याची आवश्यकता असेल.

तुम्ही व्हेरिएबलमधील इतर मूल्ये वापरू शकता:

@font-family: जॉर्जिया @dot-border: डॉटेड @transition: linear @opacity: 0.5

मिश्रण

कमीत कमी, तुम्ही नियमांचा संच संग्रहित करण्यासाठी आणि इतर संचांवर लागू करण्यासाठी मिक्सिन वापरू शकता. उदाहरणार्थ:

ग्रेडियंट (पार्श्वभूमी: #eaeaea; पार्श्वभूमी: linear-gradient(top, #eaeaea, #cccccc); पार्श्वभूमी: -o-रेखीय-ग्रेडियंट(शीर्ष, #eaeaea, #cccccc); पार्श्वभूमी: -ms-रेखीय-ग्रेडियंट(शीर्ष) , #eaeaea, #cccccc पार्श्वभूमी: -moz-linear-gradient(top, #eaeaea, #cccccc);

वरील उदाहरणात, आपण .gradients वर्गात ग्रेडियंट रंग सेट करत आहोत. मग जेव्हा तुम्हाला ग्रेडियंट जोडण्याची आवश्यकता असेल तेव्हा तुम्हाला यासारखे .gradients घालावे लागतील:

बॉक्स (. ग्रेडियंट; सीमा: 1px घन #555; सीमा-त्रिज्या: 3px; )

.बॉक्स क्लासला .ग्रेडियंट्सकडून सर्व घोषणा वारशाने मिळतात. म्हणून, वरील कमी अभिव्यक्ती खालील नियमित CSS कोडच्या समतुल्य आहे:

बॉक्स ( पार्श्वभूमी: #eaeaea; पार्श्वभूमी: रेखीय-ग्रेडियंट(शीर्ष, #eaeaea, #cccccc); पार्श्वभूमी: -o-रेखीय-ग्रेडियंट(शीर्ष, #eaeaea, #cccccc); पार्श्वभूमी: -ms-रेखीय-ग्रेडियंट(शीर्ष) , #eaeaea, #cccccc पार्श्वभूमी: -moz-linear-gradient(top, #eaeaea, #cccccc); )

CSS3 सह काम करताना, तुम्ही तुमचे काम सोपे करण्यासाठी LESS ELements लायब्ररी वापरू शकता. LESS Elements हा सामान्य CSS3 मिक्सिन्सचा संग्रह आहे जो सहसा स्टाइलमध्ये वापरला जातो, जसे की बॉर्डर-रेडियस , ग्रेडियंट्स , ड्रॉप-शॅडो इ.

कमी वापरण्यासाठी तुम्हाला फक्त कमी फाईलमध्ये @import नियम जोडणे आवश्यक आहे. तुम्हाला फक्त लायब्ररी डाउनलोड करायची आहे आणि ती तुमच्या कार्यरत निर्देशिकेत ठेवायची आहे.

@import "elements.less";

आता तुम्ही तत्व.less मधील सर्व वर्ग वापरू शकता. उदाहरणार्थ, 3px ची सीमा कोपरा त्रिज्या जोडण्यासाठी div घटक, तुम्हाला लिहावे लागेल:

Div ( .rounded(3px); )

नेस्टेड नियम

नियमित CSS कोडसह काम करताना, खालील कोड रचना अगदी सामान्य आहे:

Nav ( उंची: 40px; रुंदी: 100%; पार्श्वभूमी: #455868; बॉर्डर-बॉटम: 2px सॉलिड #283744; ) nav li (रुंदी: 600px; उंची: 40px; ) nav li a ( रंग: #fff; रेखा-उंची : 40px; मजकूर-छाया: 1px 1px 0px #283744;

नियमित CSS कोडमध्ये, आम्ही प्रत्येक नियमात पालक निर्दिष्ट करून मुले निवडतो.

कमीत कमी, तुम्ही वरील नियमांच्या संचामध्ये मुलांना पालक घटकामध्ये घरटी घालून सुधारणा करू शकता:

Nav ( उंची: 40px; रुंदी: 100%; पार्श्वभूमी: #455868; सीमा-तळा: 2px ठोस #283744; li ( रुंदी: 600px; उंची: 40px; a ( रंग: #fff; लाइन-उंची: 40px; मजकूर- सावली: 1px 1px 0px #283744; ) )

तुम्ही छद्म-वर्ग देखील वापरू शकता, उदाहरणार्थ:हॉवर, अँपरसँड वर्ण (&) वापरून. आम्हाला लिंक टॅगमध्ये :hover जोडायचे आहे असे समजा:

A ( रंग: #fff; रेखा-उंची: 40px; मजकूर-छाया: 1px 1px 0px #283744; &:होवर (पार्श्वभूमी-रंग: #000; रंग: #fff; ))

ऑपरेशन्स

तुम्ही कमी मध्ये ऑपरेशन देखील वापरू शकता. बेरीज, वजाबाकी, गुणाकार आणि भागाकार उपलब्ध आहेत.

समजू या की मूलद्रव्य B हे घटक A पेक्षा दुप्पट उंच आहे:

@height: 100px .element-A ( उंची: @height; ) .element-B (उंची: @height * 2; )

प्रथम आपण @height व्हेरिएबल परिभाषित करतो आणि त्याला A घटकाची उंची दर्शवण्यासाठी नियुक्त करतो.

घटक B मध्ये, आपण व्हेरिएबलचे मूल्य 2 ने गुणाकार करतो. आता, जेव्हा आपण @height व्हेरिएबलचे मूल्य बदलतो, तेव्हा घटक B नेहमी दुप्पट उंच असेल.

दृश्यमानतेचे क्षेत्र

स्कोपची संकल्पना कमी वापरते. स्थानिक संदर्भातील व्हेरिएबल्स प्रथम वापरल्या जातात आणि ते नसल्यास, विस्तृत व्याप्तीमध्ये शोध केला जातो.

शीर्षलेख ( @color: काळा; पार्श्वभूमी-रंग: @color; nav ( @color: निळा; पार्श्वभूमी-रंग: @color; a ( रंग: @color; ) )

वरील मध्ये उदाहरण शीर्षलेखब्लॅक व्हॅल्यूसह रंगासाठी व्हेरिएबल आहे, परंतु @color व्हेरिएबल स्थानिक संदर्भात असल्याने nav घटकाची पार्श्वभूमी निळी असेल.

निष्कर्ष

मालिकेतील पुढील धड्यांमध्ये, आपण LESS च्या वास्तविक जीवनातील वापराचे उदाहरण आणि टूलकिटच्या काही उपयुक्त बाबी पाहू.

CSS हे एक साधे आणि सुलभ साधन आहे. तथापि, त्याच्या मर्यादा आहेत, विशेषत: जेव्हा तयार कोड राखण्यासाठी येतो. जेव्हा तुम्हाला एकाहून अधिक फाइल्समध्ये पसरलेल्या हजारो स्टाईल लाइन्समध्ये सुधारणा करण्याची आवश्यकता असते, तेव्हा हे कार्य एक आव्हान बनते.

या समस्येवर मात करण्यासाठी, CSS प्रीप्रोसेसर तयार केले गेले आहेत जे आपल्याला गतिशीलपणे शैली एकत्र करण्यास अनुमती देतात. अनेक पर्याय आहेत (उदाहरणार्थ, LESS आणि SASS), परंतु या ट्यूटोरियलमध्ये आपण LESS पाहू.

कमी संपादक

हे ट्यूटोरियल लिहिताना, कमी फाइल्ससह काम करण्यासाठी पूर्णपणे समर्पित फक्त एकच संपादक होता - ChrunchApp. हे ऍप्लिकेशन क्रॉस-प्लॅटफॉर्म आहे, Adobe Air वर बनवले आहे, ते Windows, Mac OSX आणि Linux वर चालवता येते.

इतर संपादकांसाठी (जसे की Dreamweaver, Coda, NotePad++ आणि SublimeText 2) प्लगइन किंवा ॲड-ऑन आहेत जे तुम्हाला कमी वाक्यरचना हायलाइटिंग प्रदान करण्याची परवानगी देतात.

कमी वापरणे

कमी वापरण्यास अतिशय सोपे आहे. तुम्हाला तुमच्या HTML दस्तऐवजाच्या हेड टॅगमध्ये फक्त दोन ओळी जोडण्याची आवश्यकता आहे. पहिल्या ओळीत तुमच्या .less फाइलचे नाव आहे आणि दुसऱ्या ओळीत less.js लायब्ररीचे कनेक्शन आहे (ते अधिकृत वेबसाइटवरून डाउनलोड केले जाऊ शकते).

आपल्या धड्यात आपण दुसरा मार्ग दाखवू. आम्ही LESS कंपाइलर वापरू: Windows साठी आम्ही WinLess वापरू शकतो आणि Mac OSX साठी आम्ही LESS.app वापरू शकतो.

कार्यरत निर्देशिकेत .less फाइल तयार करा. नंतर कंपाइलर (WinLESS किंवा LESS.app) उघडा आणि त्यामध्ये कार्यरत निर्देशिका आयात करा. कंपाइलरला सर्व .less फाईल्स सापडतील. इतकंच. आता, जेव्हाही आपण .less फाइल बदलतो, तेव्हा कंपाइलर आपोआप नियमित CSS कोड .css फाईलमध्ये तयार करेल जी ब्राउझरद्वारे स्वीकारली जाते.

सीएसएस फाइलला एचटीएमएल डॉक्युमेंटशी बांधण्यासाठी जे काही उरले आहे:

कमी वाक्यरचना

नियमित CSS च्या विपरीत, कमी ही प्रोग्रामिंग भाषेसारखी असते. ते डायनॅमिक आहे, त्यामुळे व्हेरिएबल्स, ऑपरेशन्स आणि स्कोप वापरण्याची अपेक्षा करणे तर्कसंगत आहे.

चल

चला प्रथम व्हेरिएबल्स पाहू.

CSS सोबत काम करताना, तुम्हाला बहुधा अशी परिस्थिती आली असेल जिथे स्टाइलशीटमध्ये एकाधिक ब्लॉक्समध्ये पुनरावृत्ती मूल्य सेट केले जाते.

वर्ग1 ( पार्श्वभूमी-रंग: #2d5e8b; ) .वर्ग2 (पार्श्वभूमी-रंग: #fff; रंग: #2d5e8b; ) .वर्ग3 ( सीमा: 1px घन #2d5e8b; )

मूल्य बदलण्यासाठी तुम्हाला संपूर्ण स्टाईल शीटमध्ये कोडचे 1000 समान विभाग चाळावे लागेपर्यंत सर्व काही छान आहे. मोठ्या प्रकल्पावर काम करताना ही परिस्थिती उद्भवू शकते.

LESS प्रीप्रोसेसर वापरताना, व्हेरिएबल्स वापरून ही समस्या सहजपणे सोडवली जाते. व्हेरिएबल्स तुम्हाला स्टाइल शीटमध्ये पुन्हा वापरता येणारी मूल्ये साठवण्याची परवानगी देतात.

@color-base: #2d5e8b; .class1 ( पार्श्वभूमी-रंग: @color-base; ) .class2 (पार्श्वभूमी-रंग: #fff; रंग: @color-base; ) .class3 ( सीमा: 1px घन @color-base; )

वरील उदाहरणात, @color-base व्हेरिएबल #2d5e8b मूल्य संचयित करते. आणि जेव्हा तुम्हाला रंग बदलण्याची आवश्यकता असेल, तेव्हा तुम्हाला फक्त व्हेरिएबलमधील मूल्य बदलण्याची आवश्यकता असेल.

तुम्ही व्हेरिएबलमधील इतर मूल्ये वापरू शकता:

@font-family: जॉर्जिया @dot-border: डॉटेड @transition: linear @opacity: 0.5

मिश्रण

कमीत कमी, तुम्ही नियमांचा संच संग्रहित करण्यासाठी आणि इतर संचांवर लागू करण्यासाठी मिक्सिन वापरू शकता. उदाहरणार्थ:

ग्रेडियंट (पार्श्वभूमी: #eaeaea; पार्श्वभूमी: linear-gradient(top, #eaeaea, #cccccc); पार्श्वभूमी: -o-रेखीय-ग्रेडियंट(शीर्ष, #eaeaea, #cccccc); पार्श्वभूमी: -ms-रेखीय-ग्रेडियंट(शीर्ष) , #eaeaea, #cccccc पार्श्वभूमी: -moz-linear-gradient(top, #eaeaea, #cccccc);

वरील उदाहरणात, आपण .gradients वर्गात ग्रेडियंट रंग सेट करत आहोत. मग जेव्हा तुम्हाला ग्रेडियंट जोडण्याची आवश्यकता असेल तेव्हा तुम्हाला यासारखे .gradients घालावे लागतील:

बॉक्स (. ग्रेडियंट; सीमा: 1px घन #555; सीमा-त्रिज्या: 3px; )

.बॉक्स क्लासला .ग्रेडियंट्सकडून सर्व घोषणा वारशाने मिळतात. म्हणून, वरील कमी अभिव्यक्ती खालील नियमित CSS कोडच्या समतुल्य आहे:

बॉक्स ( पार्श्वभूमी: #eaeaea; पार्श्वभूमी: रेखीय-ग्रेडियंट(शीर्ष, #eaeaea, #cccccc); पार्श्वभूमी: -o-रेखीय-ग्रेडियंट(शीर्ष, #eaeaea, #cccccc); पार्श्वभूमी: -ms-रेखीय-ग्रेडियंट(शीर्ष) , #eaeaea, #cccccc पार्श्वभूमी: -moz-linear-gradient(top, #eaeaea, #cccccc); )

CSS3 सह काम करताना, तुम्ही तुमचे काम सोपे करण्यासाठी LESS ELements लायब्ररी वापरू शकता. LESS Elements हा सामान्य CSS3 मिक्सिन्सचा संग्रह आहे जो सहसा स्टाइलमध्ये वापरला जातो, जसे की बॉर्डर-रेडियस , ग्रेडियंट्स , ड्रॉप-शॅडो इ.

कमी वापरण्यासाठी तुम्हाला फक्त कमी फाईलमध्ये @import नियम जोडणे आवश्यक आहे. तुम्हाला फक्त लायब्ररी डाउनलोड करायची आहे आणि ती तुमच्या कार्यरत निर्देशिकेत ठेवायची आहे.

@import "elements.less";

आता तुम्ही तत्व.less मधील सर्व वर्ग वापरू शकता. उदाहरणार्थ, div घटकामध्ये 3px बॉर्डर कॉर्नर त्रिज्या जोडण्यासाठी, तुम्ही लिहाल:

Div ( .rounded(3px); )

नेस्टेड नियम

नियमित CSS कोडसह काम करताना, खालील कोड रचना अगदी सामान्य आहे:

Nav ( उंची: 40px; रुंदी: 100%; पार्श्वभूमी: #455868; बॉर्डर-बॉटम: 2px सॉलिड #283744; ) nav li (रुंदी: 600px; उंची: 40px; ) nav li a ( रंग: #fff; रेखा-उंची : 40px; मजकूर-छाया: 1px 1px 0px #283744;

नियमित CSS कोडमध्ये, आम्ही प्रत्येक नियमात पालक निर्दिष्ट करून मुले निवडतो.

कमीत कमी, तुम्ही वरील नियमांच्या संचामध्ये मुलांना पालक घटकामध्ये घरटी घालून सुधारणा करू शकता:

Nav ( उंची: 40px; रुंदी: 100%; पार्श्वभूमी: #455868; सीमा-तळा: 2px ठोस #283744; li ( रुंदी: 600px; उंची: 40px; a ( रंग: #fff; लाइन-उंची: 40px; मजकूर- सावली: 1px 1px 0px #283744; ) )

तुम्ही छद्म-वर्ग देखील वापरू शकता, उदाहरणार्थ:हॉवर, अँपरसँड वर्ण (&) वापरून. आम्हाला लिंक टॅगमध्ये :hover जोडायचे आहे असे समजा:

A ( रंग: #fff; रेखा-उंची: 40px; मजकूर-छाया: 1px 1px 0px #283744; &:होवर (पार्श्वभूमी-रंग: #000; रंग: #fff; ))

ऑपरेशन्स

तुम्ही कमी मध्ये ऑपरेशन देखील वापरू शकता. बेरीज, वजाबाकी, गुणाकार आणि भागाकार उपलब्ध आहेत.

समजू या की मूलद्रव्य B हे घटक A पेक्षा दुप्पट उंच आहे:

@height: 100px .element-A ( उंची: @height; ) .element-B (उंची: @height * 2; )

प्रथम आपण @height व्हेरिएबल परिभाषित करतो आणि त्याला A घटकाची उंची दर्शवण्यासाठी नियुक्त करतो.

घटक B मध्ये, आपण व्हेरिएबलचे मूल्य 2 ने गुणाकार करतो. आता, जेव्हा आपण @height व्हेरिएबलचे मूल्य बदलतो, तेव्हा घटक B नेहमी दुप्पट उंच असेल.

दृश्यमानतेचे क्षेत्र

स्कोपची संकल्पना कमी वापरते. स्थानिक संदर्भातील व्हेरिएबल्स प्रथम वापरल्या जातात आणि ते नसल्यास, विस्तृत व्याप्तीमध्ये शोध केला जातो.

शीर्षलेख ( @color: काळा; पार्श्वभूमी-रंग: @color; nav ( @color: निळा; पार्श्वभूमी-रंग: @color; a ( रंग: @color; ) )

वरील उदाहरणामध्ये, हेडरमध्ये एक कलर व्हेरिएबल ब्लॅक वर सेट केले आहे, परंतु नेव्ही घटकाची पार्श्वभूमी निळी असेल कारण @color व्हेरिएबल स्थानिक संदर्भात आहे.

निष्कर्ष

मालिकेतील पुढील धड्यांमध्ये, आपण LESS च्या वास्तविक जीवनातील वापराचे उदाहरण आणि टूलकिटच्या काही उपयुक्त बाबी पाहू.

या लेखात आम्ही कमी प्रीप्रोसेसरच्या क्षमतेबद्दल बोलू, जे काही अज्ञात शक्तींमुळे जवळजवळ कोणीही वापरत नाही. याव्यतिरिक्त, आम्ही गहाळ कार्यक्षमतेबद्दल बोलू आणि ते जोडण्याचा प्रयत्न करू.

तुम्हाला खरोखर करायचे असले तरीही काय करू नये याच्या एका छोट्या स्मरणाने सुरुवात करण्याचे मी सुचवितो. Alesya फ्रेमवर्क पहा, जे इतर लोकांना कमी शिकवणाऱ्या मित्राने विकसित केले होते. ./core/functions.less फाईल जवळून पाहण्याचा प्रयत्न करा. नाही तरी, दुव्याचे अनुसरण करू नका, फक्त या फाईलच्या छोट्या भागाचा स्क्रीनशॉट पहा. जेव्हा मी ते पहिल्यांदा पाहिलं तेव्हा मला धक्काच बसला.

याचे औचित्य असे आहे की चक्र खूप मंद आहे, परिणामी, CSS मध्ये कमी ची भाषांतर गती कमी होते आणि भाषांतर वेळ वाढतो. पेंटियम 4? कोणताही गुन्हा नाही, परंतु ते निराशाजनक आहे.

जेरेमी कीथ यांनी लिहिलेल्या “HTML5 फॉर वेब डिझायनर्स” या पुस्तकातून मी एक उतारा देईन, जो फार पूर्वी VK वर सार्वजनिक नायक बनला नव्हता:

चला असे गृहीत धरू की जगात एक दुष्ट राक्षस आहे जो इंटरनेट आणि सर्व इंटरनेट वापरकर्त्यांचा द्वेष करतो. आपोआप प्ले होऊ लागलेल्या पृष्ठावर ऑडिओ फाइल एम्बेड करणे हे आश्चर्यकारकपणे उद्धट आणि मूर्खपणाचे आहे याची या गृहस्थाला काळजी नाही. ऑटोप्ले विशेषता वापरून, तुम्ही त्याच्या अत्यंत वाईट इच्छा पूर्ण करू शकता.

तुम्ही कधीही अशाप्रकारे ऑटोप्ले विशेषता वापरल्यास, मी तुम्हाला शोधेन हे जाणून घ्या.

म्हणूनच, जर तुम्ही देखील कमी वापरत असाल, तर हे जाणून घ्या की ते तुम्हाला आधीच शोधत आहेत आणि लवकरच तुम्हाला सापडतील.

निवडकर्ता विस्तार

आमच्याकडे आमच्या दिवसांचे वैशिष्ट्यपूर्ण फ्लो ब्रेकर आहे:

क्लियरफिक्स ( &:पूर्वी, &:नंतर ( सामग्री: " "; डिस्प्ले: टेबल; ) &: नंतर (स्पष्ट: दोन्ही; ) )

आणि काही निवडक जे क्लिअरफिक्सचा वापर सूचित करतात. अर्थात, तुम्ही .clearfix मिक्सिन म्हणून वापरू शकता आणि ते सर्वत्र तयार करू शकता मोठी रक्कमअनावश्यक, पण आवश्यक कोड. तथापि, आपण निवडक विस्तार वापरून हे टाळू शकता.

उदाहरणार्थ, यासारखे:

Navbar ( &:extend(.clearfix all); ... ) .navbar-collapse ( &:extend(.clearfix all); ... ) .ad ( &:extend(.clearfix all); ... )

परिणामी, आमचे class.clearfix कडून मित्रांशी संवाद साधण्यास सुरुवात होते विविध भागतुमच्या शैली, कोडच्या अतिरिक्त ओळी कोणाशीही शेअर न करता:

क्लियरफिक्स:आधी, .क्लीअरफिक्स:नंतर, .navbar:पूर्वी, .navbar:नंतर, .navbar-कोलॅप्स:पूर्वी, .navbar-कोलॅप्स:नंतर, .ad:पूर्वी, .ad:नंतर ( सामग्री: " "; प्रदर्शन: सारणी

अर्थात, तुम्ही याचा गैरवापर करू नये. खरे सांगायचे तर, मी तुम्हाला फक्त क्लिअरफिक्ससाठी आणि नियम लागू असलेल्या प्रकरणांमध्ये निवडकर्ता विस्तार वापरण्याचा सल्ला देतो: "ठीक आहे, हे खरोखर आवश्यक आहे, मी काहीही करू शकत नाही, अन्यथा ते आणखी वाईट होईल." जेव्हा घटक शैलींसह हाताळणी होते तेव्हा तुम्ही निवडक विस्तार वापरू नये. सर्वात सामान्य आणि मूर्ख चूक:

वर्ग ( रंग: #fff; पार्श्वभूमी: #fff; ) .नवीन-वर्ग ( &:विस्तार (.वर्ग); ) // .वर्ग, // .नवीन-वर्ग ( // रंग: #fff; // पार्श्वभूमी: #fff; //)

तुम्ही ते करू शकत नाही. हा मूर्खपणा आहे. मिक्सिन म्हणून .class वापरणे चांगले आहे:

वर्ग ( रंग: #fff; पार्श्वभूमी: #fff; ) .नवीन-वर्ग ( .वर्ग; ) // .वर्ग ( // रंग: #fff; // पार्श्वभूमी: #fff; // ) // .new-class ( // रंग: #fff; // पार्श्वभूमी: #fff; // )

हे लक्षात ठेव!

आयात पर्याय

कृपया दस्तऐवजीकरण विभाग "आयात निर्देश पर्याय" पहा.

मी फक्त देईन लहान वर्णनया पॅरामीटर्सपैकी सर्वात महत्वाचे:

संदर्भ

तुम्हाला .less फाइल्स वापरण्याची परवानगी देते, परंतु स्पष्ट कॉलशिवाय त्यांची सामग्री प्रदर्शित करू शकत नाही. जर तुम्ही बूटस्ट्रॅप लायब्ररी म्हणून वापरत असाल तर फ्रेमवर्क नाही, तर एक अतिशय उपयुक्त पर्याय आहे:

@import (संदर्भ) "bower_components/bootstrap/less/bootstrap"; .my-alert ( .alert; )

हे पॅरामीटर वापरल्याने .less विस्तार नसलेल्या फायली समाविष्ट करणे शक्य होते. पॅरामीटर आवश्यक नाही, कारण सर्वकाही त्याशिवाय कार्य करेल, परंतु, तरीही, आपल्याला ऑर्डर आवडत असल्यास, ते उपयुक्त ठरेल. .less, उदाहरणार्थ, .variables, .mixins व्यतिरिक्त इतर विस्तारासह फाइल्स कनेक्ट करताना हे पॅरामीटर वापरले जाऊ शकते.

आपल्याला ते याप्रमाणे लागू करणे आवश्यक आहे:

@import (कीवर्ड) "फाइलनाव";

सह तपशीलवार वर्णनआणि उदाहरणे दस्तऐवजीकरण पृष्ठांवर आढळू शकतात. म्हणून, नम्रपणे, मी तुम्हाला, माझ्या वाचकांना, दस्तऐवज वाचण्यासाठी पाठवत आहे. अविस्मरणीय भावना :)

अटी

कमी सशर्त आहेत. होय, इतर प्रीप्रोसेसरच्या तुलनेत ते पूर्ण वाढलेले नाहीत, परंतु तरीही त्यांची उपस्थिती आनंदित होऊ शकत नाही. ते मला सास मधील @if पेक्षा अधिक सोयीस्कर वाटतात, जरी व्यावहारिक फरक नाही.

मिक्सिन(@व्हेरिएबल) ( आणि जेव्हा (@व्हेरिएबल = 1) (सामग्री: "सत्य") आणि नसताना (@व्हेरिएबल = 1) (सामग्री: "असत्य" ) .वर्ग-चाचणी ( .मिक्सिन(1); . मिक्सिन (२)

परिणामी, आम्हाला खालील CSS मिळेल:

वर्ग-चाचणी (सामग्री: "TRUE"; सामग्री: "FALSE"; )

आता काय झाले? जादू?

खरंच नाही. कीवर्डजेव्हा येथे सर्व प्रोग्रामिंग भाषांमध्ये नेहमीच्या इफची जागा घेते आणि फक्त दोन असतात लॉजिक गेट: नाही - नकार, आणि - फक्त आणिआणि तेच आहे, आणखी काही नाही. मी यासह विशेषतः छान काहीही करू शकत नाही, परंतु मी वापरतो सशर्त ऑपरेटरव्युत्पन्न होऊ नये म्हणून अतिरिक्त कोड. अशी एक परिस्थिती, उदाहरणार्थ, बटण शैली जनरेटरमध्ये सीमा-त्रिज्या गुणधर्म आहे. जर कोणत्याही मालमत्तेचे मूल्य (0) भूमिका बजावत नसेल तर पिढी दरम्यान पुन्हा एकदा का निर्दिष्ट केले जाईल? - ते बरोबर आहे, गरज नाही.

चलांचे इंटरपोलेशन

जेव्हा आपल्याला एका व्हेरिएबलचे मूल्य इतरांवर अवलंबून असते तेव्हा कमी मध्ये एक मनोरंजक डिझाइन असते.

// व्हेरिएबल्स @clr-grey-100: #fafafa; @clr-grey-200: #f5f5f5; @clr-red-100: #ffebee; @clr-red-200: #ffcdd2; .mixin(@color, @temperature: 500) (रंग: ~"@(clr-@(color)-@(तापमान))"; पार्श्वभूमी: e("@(clr-@(color)-@(तापमान) )"); ) .वर्ग-चाचणी ( .मिक्सिन (राखाडी, 100); &-चाचणी ( .मिक्सिन (लाल, 200); ) )

हे उदाहरण एक मिक्सिन कॉल करते ज्याचे पॅरामीटर्स रंग आहेत ( @रंग) आणि त्याचे तापमान ( @तापमान). पुढे, आपण सर्व व्हेरिएबल्स एकामध्ये एकत्रित करतो, म्हणजे, सोप्या भाषेत, आपण एक नवीन व्हेरिएबल बनवतो आणि त्याचे मूल्य मिळवतो. जेव्हा स्ट्रिंग, तुलनेने बोलता, व्हेरिएबलच्या कॉलमध्ये बदलते तेव्हा व्हेरिएबल्सचे इंटरपोलेशन असते.

लक्षात घ्या की या उदाहरणात आम्ही कुत्र्यानंतर कुरळे ब्रेसेस वापरतो - हे खूप महत्वाचे आहे.

बाहेर पडताना:

वर्ग-चाचणी ( रंग: #fafafa; पार्श्वभूमी: #fafafa; ) .class-test-test (रंग: #ffcdd2; पार्श्वभूमी: #ffcdd2; )

तसे, मला हे Sass आणि Stylus मध्ये सापडले नाही. कदाचित एक चौकस वाचक मला सांगू शकेल? :)

सायकल

अनेक अनुयायी Sass प्रीप्रोसेसरआणि स्टाइलस आग्रहाने सांगतात की Less मध्ये कोणतेही लूप नाहीत, परंतु काही आहेत, जरी इतर सर्वांसारखे नसले तरी. ते वापरणे फक्त गैरसोयीचे आहे.

समजा आमच्याकडे रंगांची यादी आहे:

@list-red: #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, #f44336, #e53935, #d32f2f, #c62828, #b71c1c;

उदाहरणार्थ, प्रत्येक रंगासाठी वर्ग तयार करूया:

कलर-जनरेटर(@index: 1, @color) जेव्हा (@index