डेवलपर्स के लिए सैस बेस्ट प्रैक्टिसेस टिप्स एंड टूल्स

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

मैंने वेब को स्कैन किया है और इस लेख को संकलित किया है विस्तार योग्य और पुन: प्रयोज्य सैस कोड लिखने के लिए सर्वोत्तम अभ्यास. सुझाव मेरी अपनी राय से और सास दिशानिर्देश जैसी विश्वसनीय वेबसाइटों से हैं.

आपको निश्चित रूप से इन सभी सुविधाओं को अपने वर्कफ़्लो में लागू करने की आवश्यकता नहीं है। लेकिन यह कम से कम इन विचारों का मनोरंजन करने और संभावित लाभों पर विचार करने के लिए लायक है.

फ़ाइल संगठन

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

लेकिन अभी के लिए DoCSSa से इस फ़ाइल संरचना उदाहरण पर एक नज़र डालें। मैंने इस फ़ाइल संरचना को फिर से बनाया है जिसे आप नीचे देख सकते हैं:

यह सिर्फ एक सुझाव है और यह उन कई तरीकों में से एक है जो आप अपनी फ़ाइलों को व्यवस्थित कर सकते हैं। आप अन्य तरीकों को पा सकते हैं जो विभिन्न फ़ोल्डर संरचनाओं का उपयोग करते हैं जैसे “वैश्विक” साइट-व्यापी SCSS और के लिए “पृष्ठों” पृष्ठ-विशिष्ट SCSS के लिए.

आइए प्रत्येक फ़ोल्डर के उद्देश्य की जांच करने के लिए इस सुझाई गई संगठन शैली से चलें:

• / वैश्विक - इसमें Sass फाइलें हैं जो टाइपोग्राफी, रंग और ग्रिड जैसी साइट-वाइड पर लागू होती हैं
• /अवयव - इसमें बटन, टेबल या इनपुट फ़ील्ड जैसी घटक शैलियों वाली Sass फाइलें हैं
• / अनुभागों - किसी पृष्ठ पर विशिष्ट पृष्ठों या क्षेत्रों को समर्पित Sass फाइलें होती हैं (बेहतर तरीके से / घटकों / फ़ोल्डर में संयुक्त काम कर सकती हैं)
• / utils - सामान्य स्थिति की तरह तृतीय-पक्ष उपयोगिताओं में शामिल हैं जिन्हें बोवर जैसे टूल के साथ गतिशील रूप से अपडेट किया जा सकता है.
• main.scss - रूट फ़ोल्डर में प्राथमिक सैस फ़ाइल जो अन्य सभी को आयात करती है.

यह सिर्फ एक बुनियादी शुरुआती बिंदु है और आपके अपने विचारों के साथ विस्तार करने के लिए बहुत जगह है.

लेकिन कोई फर्क नहीं पड़ता कि आप अपने SCSS को व्यवस्थित करने के लिए कैसे चुनते हैं, यह महत्वपूर्ण है कि आप कुछ संगठन है पुस्तकालयों के लिए एक अलग फ़ाइल (या फ़ोल्डर) के साथ जैसे सामान्यीकृत करें जिसे अद्यतन करने की आवश्यकता है, इस परियोजना के लिए सैस के धारावाहिकों में घटक.

Sass partials आधुनिक सर्वोत्तम प्रथाओं के लिए महत्वपूर्ण हैं। ये ज़र्ब की डिज़ाइन टीम और कई अन्य पेशेवर फ्रंटेंड डेवलपर्स द्वारा अत्यधिक अनुशंसित हैं.

यहाँ सास वेबसाइट से एक उद्धरण के बारे में व्याख्या कर रहा है:

“आप आंशिक Sass फ़ाइलें बना सकते हैं जिनमें CSS के छोटे टुकड़े होते हैं जिन्हें आप अन्य Sass फ़ाइलों में शामिल कर सकते हैं। यह एक शानदार तरीका है अपने CSS को modularize करें और चीजों को बनाए रखने में आसान बनाने में मदद करें. एक आंशिक रूप से एक Sass फ़ाइल है जिसका नाम एक प्रमुख अंडरस्कोर है। आप इसे कुछ इस तरह का नाम दे सकते हैं _partial.scss. अंडरस्कोर सैस को यह बताने देता है कि फाइल केवल एक आंशिक फाइल है और इसे सीएसएस फाइल में जेनरेट नहीं किया जाना चाहिए। के साथ सैस के हिस्से का उपयोग किया जाता है @आयात आदेश.”

सास फ़ाइल संरचना के बारे में इन अन्य पोस्टों पर एक नज़र डालें:

• कैसे मैं अपने Sass परियोजनाओं संरचना
• सौंदर्यशास्त्रीय सास: वास्तुकला और शैली संगठन
• निर्देशिका संरचनाएं जो आपके कोड को बनाए रखने में आपकी सहायता करती हैं

आयात रणनीतियाँ

पर्याप्त नहीं कहा जा सकता है कि सास आयात और भाग के मूल्य के बारे में कहा जा सकता है। कोड संगठन एक आयात संरचना और वर्कफ़्लो प्राप्त करने के लिए महत्वपूर्ण है जो बस काम करता है.

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

ध्यान रखें कि मिक्सी हैं आयात करने का एक तरीका है, या डुप्लिकेट करना, Sass कोड. वे अविश्वसनीय रूप से शक्तिशाली हैं लेकिन उनका उपयोग नहीं किया जाना चाहिए “स्थिर” कोड। ध्यान रखें कि मिक्सिन्स, एक्सटेंड्स और प्लेसहोल्डर्स के बीच अंतर होता है, जिनका सभी का सास विकास में उपयोग होता है.

मिश्रण को कोड परिवर्तन के लिए मिक्सिन में पारित गतिशील मूल्यों के साथ सबसे अच्छा उपयोग किया जाता है। उदाहरण के लिए, इस सैस मिश्रण को देखें जो दो रंगों के बीच एक पृष्ठभूमि ढाल बनाता है.

@ मिक्सिन लीनियरग्रैडिएंट ($ शीर्ष, $ निचला) पृष्ठभूमि: $ शीर्ष; / * पुराने ब्राउज़र * / पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, $ शीर्ष 0%, $ निचला 100%); / * FF3.6 + * / पृष्ठभूमि: -webkit-gradient (रैखिक, बाएं शीर्ष, बाएं नीचे, रंग-रोकें (0%, $ शीर्ष), रंग-रोक (100%, $ निचला)); / * क्रोम, सफारी 4 + * / पृष्ठभूमि: -webkit- रैखिक-ढाल (शीर्ष, $ शीर्ष 0%, $ 100% नीचे); / * Chrome10 +, Safari5.1 + * / पृष्ठभूमि: -o-रैखिक-ढाल (शीर्ष, $ शीर्ष 0%, $ निचला 100%); / * ओपेरा 11.10+ * / पृष्ठभूमि: -ms-रैखिक-ढाल (शीर्ष, $ शीर्ष 0%, $ निचला 100%); / * IE10 + * / पृष्ठभूमि: रैखिक-ढाल (नीचे, $ शीर्ष 0%, $ 100% नीचे); / * W3C * / फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# 000000", GradientType = 0); / * IE6-9 * /

मिक्सिन दो मान लेता है: एक शीर्ष रंग और एक निचला रंग। आप विभिन्न प्रकार के ग्रेडिएंट के लिए अलग-अलग मिश्रण लिख सकते हैं जिसमें 3 या 4+ अलग-अलग रंग शामिल हैं। यह आपको कस्टम विकल्पों के मापदंडों को बदलते समय मिक्सिन कोड को आयात और क्लोन करने की अनुमति देता है.

कोड जिम्मेदार से उदाहरण इस तरह दिखता है:

.बटन @include linearGradient (#cccccc, # 666666); 

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

हालांकि Sass में केवल एक @import पद्धति है, मैंने कोड के लचीलेपन को प्रदर्शित करने के लिए मिश्रण और प्लेसहोल्डर को शामिल किया है जो एक फ़ाइल में लिखा जा सकता है - जिसमें कहीं भी शामिल हो.

आयात संरचना बनाते समय DRY कोडिंग की अवधारणाओं का पालन करना याद रखें (खुद को दोहराएं नहीं).

नामकरण की परंपरा

नामकरण सम्मेलनों के लिए सामान्य नियम चर, कार्यों और मिश्रणों पर लागू होते हैं। सैस में किसी भी चीज का नामकरण करते समय इसकी सिफारिश की जाती है जुदाई के लिए डैश के साथ सभी लोअरकेस अक्षरों का उपयोग करें.

Sass कोड सिंटैक्स वास्तव में CSS दिशानिर्देश नियमों पर आधारित है। यहां कुछ अनुशंसित सर्वोत्तम प्रथाओं को ध्यान में रखा गया है:

• दो (2) रिक्त स्थान संकेत, कोई टैब नहीं
• आदर्श रूप से, 80-वर्ण चौड़ी रेखाएं या कम
• व्हॉट्सएप का सार्थक उपयोग
• CSS ऑपरेशन समझाने के लिए टिप्पणियों का उपयोग करें

ये मान्य Sass कोड के लिए आवश्यक आइटम नहीं हैं। लेकिन ये सुझाव पेशेवर डेवलपर्स से आते हैं जो पाया है कि ये नियम सबसे समान कोडिंग अनुभव प्रदान करते हैं.

लेकिन नामकरण सम्मेलनों के संबंध में आप दो अलग-अलग संरचनाओं के साथ समाप्त हो सकते हैं: एक सैस नामों के लिए और दूसरा सीएसएस वर्ग नामों के लिए। कुछ डेवलपर्स SEM सुझावों पर BEM पसंद करते हैं। न तो कोई अधिक है, या कम है, सही है; विभिन्न ऑपरेटिंग प्रक्रियाओं के साथ बस अलग है.

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

अपने चर और मिश्रण को व्यवस्थित करते समय इसकी अनुशंसा की जाती है उन्हें श्रेणी से विभाजित करें, फिर उन्हें वर्णानुक्रम में सूचीबद्ध करें. यह पूरी तरह से संपादन को आसान बनाता है क्योंकि आप जानते हैं कि वास्तव में कुछ कहां खोजना है.

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

यह जानने के लिए कि आप अपनी Sass फ़ाइलों के लिए सामग्री की एक तालिका कैसे तैयार कर सकते हैं, फाउंडेशन की सेटिंग फ़ाइल देखें.

 // साइट सेटिंग्स के लिए फाउंडेशन // ----------------------------- // सामग्री की तालिका: // // 1 वैश्विक // 2. ब्रेकप्वाइंट्स // 3. ग्रिड // 4. बेस टाइपोग्राफी // 5. टाइपोग्राफी हेल्पर्स ... // 1. ग्लोबल // --------- $ ग्लोबल-फॉन्ट-साइज़: 100 %; $ वैश्विक-चौड़ाई: रेम-कैल्क (1200); $ वैश्विक-लाइनशीट: 1.5; // आदि

एक और नामकरण अभ्यास से संबंधित है उत्तरदायी ब्रेकप्वाइंट. Sass ब्रेकपॉइंट्स का नामकरण करते समय, डिवाइस-विशिष्ट नामों से बचने का प्रयास करें। छोटे, मेड, lg और xlg जैसे नाम लिखना बेहतर है क्योंकि वे हैं एक दूसरे के सापेक्ष.

यह ब्रेकपॉइंट के बीच आंतरिक संबंधों के लिए बेहतर है, लेकिन उन टीमों के लिए भी बहुत अच्छा है जहां डेवलपर्स को पता नहीं हो सकता है कि कौन से डिवाइस एक-दूसरे से संबंधित हैं.

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

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

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

नेस्टिंग और लूपिंग

ये दो Sass तकनीक कार्रवाई में बहुत अलग हैं, फिर भी दोनों के पास है क्षमता का दुरुपयोग किया जाता है यदि बहुत अधिक उपयोग नहीं किया जाता है.

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

शरीर div.content div.container … बॉडी div.content div.container div.articles … बॉडी div.content div.container div.articles> div.post … 

बहुत अधिक विशिष्ट और ओवरराइट करने के लिए लगभग असंभव है, इस प्रकार का कोड स्टाइलशीट के कैस्केडिंग के उद्देश्य को पराजित करता है.

इस साइट-गाइड को स्किमिंग करते हुए आपको नेस्टिंग के लिए तीन सुनहरे नियम मिलेंगे:

• कभी भी 3 स्तरों से अधिक गहरे न जाएं.
• सुनिश्चित करें कि सीएसएस आउटपुट साफ और पुन: प्रयोज्य है.
• नेस्टिंग का उपयोग करें जब यह समझ में आता है, डिफ़ॉल्ट विकल्प के रूप में नहीं.

डेवलपर जोश ब्रेटन जब आवश्यक हो तब घोंसले के शिकार का सुझाव देते हैं, बाकी को एक सामान्य वाक्यविन्यास नियम के रूप में इंडेंट करते हैं.

अपने चयनकर्ताओं को इंडेंट करने से सीएसएस प्रभाव में कोई कमी नहीं आएगी। लेकिन आपके पास एक आसान समय होगा कि आप अपनी Sass फाइल को पिनपाइंट कर लें कि कौन सी कक्षाएं एक दूसरे से संबंधित हैं.

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

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

/ * Sass कोड * / @ $ i से 1 के माध्यम से 8 $ चौड़ाई: प्रतिशत (1 / $ i) .col - # $ i चौड़ाई: $ चौड़ाई;  / * आउटपुट * / / .col-1 चौड़ाई: 100%; .col-2 चौड़ाई: 50%; .col-3 चौड़ाई: 33.333%; .col-4 चौड़ाई: 25%;  .col-5 चौड़ाई: 20%; .col-6 चौड़ाई: 16.666%;; .col-7 चौड़ाई: 14.285%; .col-8 चौड़ाई: 12.5%;

इन स्तंभ वर्गों का उपयोग ग्रिड प्रणाली के साथ संयोजन में किया जा सकता है। आप लूप कोड को संपादित करके और भी कॉलम जोड़ सकते हैं या कुछ हटा सकते हैं.

लूप्स चाहिए नहीं चयनकर्ता के लिए चयनकर्ताओं या संपत्तियों की नकल करने के लिए उपयोग किया जाता है; यही मिश्रण हैं.

जब भी लूपिंग होता है तो सैस मैप्स नाम की कोई चीज होती है जो कुंजी को संग्रहीत करती है: डेटा के मूल्य जोड़े। जब भी संभव हो उन्नत उपयोगकर्ताओं को इनका लाभ उठाना चाहिए.

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

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

यदि आप कभी भ्रमित होते हैं या घोंसले के शिकार या सैस लूप के बारे में प्रतिक्रिया चाहते हैं, तो आपको या तो / r / sass / या / r / css / में एक प्रश्न पोस्ट करना चाहिए, बहुत जानकार Sass डेवलपर्स के साथ सक्रिय Reddit समुदाय.

modularization

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

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

सास मॉड्यूल परिभाषा बहुत स्पष्ट है और एक बहुत विशिष्ट सुझाव देता है: मॉड्यूल का आयात कभी भी आउटपुट कोड नहीं होना चाहिए.

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

हालाँकि एक सैस वे लेख में सभी चयनकर्ताओं को मिक्सिन्स के रूप में लिखने और केवल आवश्यकतानुसार उन्हें लिखने का सुझाव दिया गया है। आप इसे अपनाते हैं या नहीं, अंततः आपकी पसंद है। मुझे लगता है कि यह परियोजना के आकार और मिश्रण को संभालने के साथ आपके आराम पर निर्भर करता है.

द सैस वे पर अपने पद से जॉन लॉन्ग को उद्धृत करते हुए:

“मेरे लिए, मॉड्यूल मेरी Sass परियोजनाओं की बुनियादी इकाइयाँ या बिल्डिंग ब्लॉक बन गए हैं.”

यदि आप वास्तव में एक सास दिनचर्या की तलाश में हैं तो मैं पूरी तरह से मॉड्यूलर होने की सलाह देता हूं। लगभग सभी चीजों को एक मॉड्यूलर आंशिक के रूप में बनाने की कोशिश करें जो प्राथमिक सीएसएस फ़ाइल में शामिल हो जाती है। सबसे पहले यह वर्कफ़्लो कठिन लग सकता है लेकिन यह एक बड़े पैमाने पर समझ में आता है - विशेष रूप से बड़ी परियोजनाओं के साथ.

जब वे अलग-अलग फ़ाइलों में स्थित होते हैं, तो मॉड्यूल को एक प्रोजेक्ट से दूसरे में कॉपी करना बहुत आसान होता है. लचीलापन तथा पुन: प्रयोज्य कोड मॉड्यूलर विकास के कोने हैं.

Sass मॉड्यूल और मॉडर्लाइज़ेशन तकनीकों के बारे में अधिक जानने के लिए इन पदों की जाँच करें:

• सीएसएस मॉड्यूल: भविष्य में आपका स्वागत है
• मॉड्यूलर सैस के पेशेवरों और विपक्ष
• SMACSS & SASS के साथ मॉड्यूलर सीएसएस संगठन

अपने संपूर्ण वर्कफ़्लो का पता लगाएं

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

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

अन्य पुस्तकालयों द्वारा नियोजित सर्वोत्तम प्रथाओं के बारे में अधिक जानने के लिए GitHub पर फाउंडेशन की SCSS जैसी ओपन सोर्स लाइब्रेरी के माध्यम से स्किम करें.

सर्वोत्तम प्रथाओं के बारे में बात यह है कि वे वास्तव में ज्यादातर समय आपके काम में सुधार करते हैं, लेकिन कई विकल्प हैं। बस चीजों की कोशिश करो और देखो कि वे कैसा महसूस करते हैं। आप हमेशा सीखते रहेंगे ताकि 5 वर्षों के दौरान आपके सर्वोत्तम अभ्यास तेजी से बदल सकें.

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

Sass का मतलब सीएसएस विकास के अनुभव को बढ़ाना है, इसलिए स्पष्टता और सर्वोत्तम प्रथाओं के साथ काम करें संभव सबसे अच्छा अनुभव प्राप्त करने के लिए.

लपेटें

एक सास वर्कफ़्लो में भीड़ को कोड शैलियों को ट्विक करके और सर्वोत्तम प्रथाओं का पालन करके ठीक किया जा सकता है। मैंने Sass ब्लॉग और पेशेवर डेवलपर्स से दिए गए इस पोस्ट में कुछ सुझाव दिए हैं.

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

Sass विकास के लिए और अधिक युक्तियों और सर्वोत्तम प्रथाओं को खोजने के लिए इन लिंक की जाँच करें:

• सैस के दिशानिर्देश
• हमारी दृष्टि के लिए एक दृष्टि
• 8 युक्तियाँ आपको सास से बाहर निकलने में मदद करने के लिए
• एक मेस बनाने के बिना सैस में विस्तार
• सैस बेस्ट प्रैक्टिस - 3 से अधिक स्तरों पर घोंसला बनाना गहरी