एक सरल और आसान गाइड Sass को समझने के लिए

कुछ समय पहले थोरीक फिरदौस ने सास के साथ शुरुआत करने के बारे में एक शानदार लेख लिखा था, जिसमें दिखाया गया था कि आप इस बेहद उपयोगी सीएसएस प्रीप्रोसेसर भाषा को कैसे स्थापित और उपयोग कर सकते हैं (आप इसे शुरू करना चाहते हैं, आप जानते हैं, आरंभ करने के लिए).

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

• व्यापार के उपकरण
• चर
• घोंसला करने की क्रिया
• विस्तारित नियम
• mixins
• प्लेसहोल्डर चयनकर्ता
• संचालन
• कार्य

व्यापार के उपकरण

थोरीक ने आपको दिखाया कि कैसे आप कमांड लाइन से सैस का उपयोग कर सकते हैं sass - घड़ी आदेश.

यदि आप GUI उपकरण पसंद करते हैं, तो आप मेरे व्यक्तिगत पसंदीदा ऐप, कोडकिट, एक वेब डेवलपर टूल जो Sass को संकलित करने, संक्षिप्त करने, ऑटोप्रिक्सिंग और बहुत कुछ करने के लिए जा सकते हैं। Prepros एक और बहुत ही सक्षम अनुप्रयोग है जिसका उपयोग सभी प्रणालियों पर किया जा सकता है। दोनों हैं भुगतान किए गए आवेदन लेकिन अगर आप लंबे समय में उनका उपयोग कर रहे हैं तो यह अच्छी तरह से लायक है.

अगर आप अभी सैस को आज़माना चाहते हैं बिना किसी चीज के भुगतान के आप टर्मिनल का उपयोग कर सकते हैं, या कोअला (यहां हमारी समीक्षा), एक मुफ्त क्रॉस-प्लेटफॉर्म सुविधा संपन्न ऐप, जो प्रीमियम समकक्षों के खिलाफ अपनी जमीन पकड़ सकता है.

चर

पहली चीज़ जो आपको अपने सिर के चारों ओर लपेटने की आवश्यकता होगी, वह चर है। यदि आप एक PHP या अन्य समान कोडिंग भाषा पृष्ठभूमि से आते हैं, तो यह आपके लिए दूसरा स्वभाव होगा। चर हैं बिट्स और पुन: प्रयोज्य जानकारी के टुकड़े संग्रहीत करना, उदाहरण के लिए एक रंग मूल्य की तरह:

 $ प्राथमिक_ रंग: # 666666; .लेटन रंग: $ प्राइमरी_ कलर;  .important color: $ Primary_color;  

यह यहाँ उपयोगी नहीं लगता है, लेकिन कोड की 3,000 लाइनें होने की कल्पना कर सकते हैं। यदि आपकी रंग योजना बदलती है, तो आपको सीएसएस में प्रत्येक रंग मान को बदलने की आवश्यकता होगी। सैस के साथ आप बस कर सकते हैं मान को संशोधित करें का $ primary_color चर और इसके साथ किया जाएगा.

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

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

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

 #header nav / * नौसेना क्षेत्र के लिए नियम * / #header nav ul / * मेनू के लिए नियम * / #header nav li / * सूची आइटम के लिए नियम * / #header nav a / * नियम लिंक के लिए * / 

चयनकर्ताओं में, हम खुद को बहुत दोहरा रहे हैं। यदि तत्वों की जड़ें हैं, तो हम घोंसले के शिकार का उपयोग कर सकते हैं बहुत साफ तरीके से हमारे नियमों को लिखें.

यहाँ कैसे उपरोक्त कोड Sass में देख सकते हैं:

 #header nav / नौसेना क्षेत्र के लिए नियम * / ul / मेनू के लिए नियम * / li / सूची आइटम के लिए नियम * / a / लिंक के लिए नियम * / 

घोंसला बनाना अत्यंत उपयोगी है क्योंकि यह शैलियों (एक बहुत) को और अधिक पठनीय बनाता है. उचित इंडेंटेशन के साथ मिलकर नेस्टिंग का उपयोग करके आप प्राप्त कर सकते हैं अत्यधिक सुव्यवस्थित कोड संरचनाएँ, भले ही आपके पास उचित मात्रा में कोड हो.

घोंसले के शिकार का एक दोष यह है कि यह हो सकता है अनावश्यक विशिष्टता को जन्म देता है. ऊपर के उदाहरण में मैंने लिंक के साथ संदर्भित किया है #header नौसेना ए. आप भी इस्तेमाल कर सकते हैं #header नौसेना उल ली ए जो शायद बहुत ज्यादा होगा.

सास में, यह बहुत विशिष्ट होना बहुत आसान है क्योंकि आपको अपने नियमों को लागू करने की आवश्यकता है। निम्नलिखित बहुत कम पठनीय और काफी विशिष्ट है.

 #header nav / नौसेना क्षेत्र के लिए नियम * / ul / मेनू के लिए नियम * / li / सूची आइटम के लिए नियम * / / a लिंक के लिए नियम * / 

विस्तारित नियम

यदि आप ऑब्जेक्ट ओरिएंटेड भाषाओं के साथ काम कर रहे हैं, तो यह परिचित होगा। यह एक उदाहरण के माध्यम से सबसे अच्छी तरह से समझा जाता है, चलो 3 बटन बनाते हैं जो एक दूसरे के मामूली बदलाव हैं.

 .बटन प्रदर्शन: इनलाइन-ब्लॉक; रंग: # 000; पृष्ठभूमि: # 333; बॉर्डर-त्रिज्या: 4px; गद्दी: 8px 11px;  .बटन-प्राइमरी @extend .button; बैकग्राउंड: # 0091C2 .बॉटन-स्मॉल @extend .button; font-size: 0.9em; गद्दी: 3px 8px;  

.बटन-प्राथमिक तथा .बटन-छोटे कक्षाएं सभी का विस्तार करती हैं .बटन वर्ग जिसका अर्थ है कि वे इसके सभी गुणों को लेते हैं और फिर अपने स्वयं को परिभाषित करते हैं.

यह कई स्थितियों में बेहद उपयोगी है जहां एक तत्व के रूपांतरों का उपयोग किया जा सकता है। संदेश (अलर्ट / सफलता / त्रुटि), बटन (रंग, आकार), मेनू प्रकार और इतने पर सभी महान सीएसएस दक्षता के लिए विस्तारित कार्यक्षमता का उपयोग कर सकते हैं.

विस्तार का एक चेतावनी यह है कि वे मीडिया के प्रश्नों में काम नहीं करेंगे जैसा कि आप उम्मीद करेंगे। यह थोड़ा और अधिक उन्नत है, लेकिन आप प्लेसहोल्डर चयनकर्ताओं में इस व्यवहार के बारे में सभी पढ़ सकते हैं - प्लेसहोल्डर चयनकर्ता विशेष प्रकार के विस्तार हैं जो हम जल्द ही बात करेंगे.

mixins

मिक्सप्रोसेसर उपयोगकर्ताओं की एक और पसंदीदा विशेषता है। मिक्सिन्स पुन: प्रयोज्य नियम हैं - विक्रेता-विशिष्ट नियमों के लिए या लंबे सीएसएस नियमों को शॉर्टहैंड करने के लिए बिल्कुल सही.

होवर तत्वों के लिए एक संक्रमण नियम बनाने के बारे में:

 @ मिक्सिंग होवर-इफ़ेक्ट -विभक्ति-संक्रमण: पृष्ठभूमि-रंग 200ms; -मोज़-संक्रमण: पृष्ठभूमि-रंग 200ms; -ओ-संक्रमण: पृष्ठभूमि-रंग 200ms; संक्रमण: पृष्ठभूमि-रंग 200ms;  a @include होवर-प्रभाव;  .बटन @include होवर-इफ़ेक्ट;  

मिश्रण भी आपको चर का उपयोग करने की अनुमति देते हैं मिश्रण के भीतर मूल्यों को परिभाषित करें. हम ऊपर दिए गए उदाहरण को फिर से लिख सकते हैं संक्रमण के सटीक समय पर हमें नियंत्रण दें. हम उदाहरण के लिए एक छोटे से धीमी गति से संक्रमण के लिए बटन चाहते हैं.

 @ मिक्सिन होवर-इफ़ेक्ट ($ गति) -वेबकैट-संक्रमण: पृष्ठभूमि-रंग $ गति; -मोज़-संक्रमण: पृष्ठभूमि-रंग $ गति; -ओ-संक्रमण: पृष्ठभूमि-रंग $ गति; संक्रमण: पृष्ठभूमि-रंग $ गति;  a @include होवर-इफ़ेक्ट (200ms);  .बटन @include होवर-इफेक्ट (300ms);  

प्लेसहोल्डर चयनकर्ता

प्लेसहोल्डर चयनकर्ताओं को सैस 3.2 के साथ पेश किया गया था और एक समस्या को हल किया था जो आपके उत्पन्न सीएसएस कोड में थोड़ा सा ब्लोट का कारण बन सकता है। इस कोड पर एक नज़र डालें जो त्रुटि संदेश बनाता है:

 .संदेश फ़ॉन्ट-आकार: 1.1em; गद्दी: 11px; सीमा-चौड़ाई: 1px; सीमा शैली: ठोस; । मिसेज-डेंजर @extend .message; पृष्ठभूमि: # C20030; रंग: #fff; सीमा-रंग: # A8002A;  .message-success @extend .message; पृष्ठभूमि: # 7EA800; रंग: #fff; सीमा-रंग: # 6B8F00;  

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

 % संदेश फ़ॉन्ट-आकार: 1.1em; गद्दी: 11px; सीमा-चौड़ाई: 1px; सीमा शैली: ठोस; । मिसेज-डेंजर @extend% बटन; पृष्ठभूमि: # C20030; रंग: #fff; सीमा-रंग: # A8002A;  .message-success @extend% बटन; पृष्ठभूमि: # 7EA800; रंग: #fff; सीमा-रंग: # 6D9700;  

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

संचालन

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

 .कंटेनर चौड़ाई: 100%;  लेख फ्लोट: बाएं; चौड़ाई: 600px / 960px * 100%;  एक तरफ फ्लोट: सही; चौड़ाई: 300px / 960px * 100%;  

ऊपर दिया गया उदाहरण न्यूनतम परेशानी के साथ 960px आधारित ग्रिड प्रणाली बनाता है। यह निम्नलिखित सीएसएस के लिए अच्छी तरह से नीचे संकलित करेगा:

 .कंटेनर चौड़ाई: 100%;  लेख फ्लोट: बाएं; चौड़ाई: 62.5%;  एक तरफ फ्लोट: सही; चौड़ाई: 31.25%;  

एक महान उपयोग जो मुझे ऑपरेशन के लिए मिलता है, वह वास्तव में रंगों का मिश्रण है। यदि आप सफलता के संदेश सैस पर एक नज़र डालते हैं, तो यह स्पष्ट नहीं है कि पृष्ठभूमि और सीमा का रंग किसी प्रकार का संबंध है। भूरे रंग की एक छाया को घटाकर हम रंग को गहरा कर सकते हैं, जिससे संबंध दिखाई देते हैं:

 $ प्राथमिक: # 7EA800; .message-success @extend% बटन; पृष्ठभूमि: $ प्राथमिक; रंग: #fff; सीमा-रंग: $ प्राथमिक - # 111;  

हल्का घटाया हुआ रंग, जिसके परिणामस्वरूप छाया गहरा होगा। जोड़ा गया रंग हल्का, परिणामी छाया हल्का.

कार्य

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

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

 $ प्राथमिक: # 7EA800; .message-success @extend% बटन; पृष्ठभूमि: $ प्राथमिक; रंग: #fff; सीमा-रंग: गहरा ($ प्राथमिक, 5);  

फ़ंक्शन का दूसरा तर्क आवश्यक कालाधन का प्रतिशत है। सभी कार्यों के पैरामीटर हैं; प्रलेखन पर एक नज़र डालें कि वे क्या हैं! यहाँ कुछ अन्य स्व-व्याख्यात्मक रंग कार्य दिए गए हैं: desaturate, तर, पलटना, ग्रेस्केल.

प्लस्तर लगाना फ़ंक्शन, पीएचपी की तरह, अगले पूरे नंबर पर गोल संख्या देता है। इसका उपयोग कॉलम की चौड़ाई की गणना करते समय या यदि आप अंतिम सीएसएस में बहुत सारे दशमलव स्थानों का उपयोग नहीं करना चाहते हैं.

 .शीर्षक फ़ॉन्ट-आकार: छत ($ heading_size * 1.3314);  

अवलोकन

Sass में सुविधाएँ हमें कम प्रयास के साथ बेहतर CSS लिखने की शक्ति प्रदान करती हैं। मिश्रणों के समुचित उपयोग, विस्तार, कार्य और चर हमारी शैलियों को अधिक टिकाऊ, अधिक सुपाठ्य और लिखने में आसान बना देंगे.

यदि आप एक और समान सीएसएस प्रीप्रोसेसर में रुचि रखते हैं, तो मेरा सुझाव है कि LESS पर एक नज़र डालें (या हमारे शुरुआती गाइड की जाँच करें) - अंतर्निहित प्रिंसिपल बहुत समान है!