एसएसएस द्वारा उत्पन्न सीएसएस स्टाइललिंट त्रुटियों को कैसे ठीक करें।

तो आपने sass का उपयोग करना शुरू कर दिया है, यह चीजों को आसान बनाता है, है ना? खैर, सच है, लेकिन एक दिन, मैं कुछ त्रुटियों में भाग जाता हूं, जिन्होंने उस बारे में मेरा मन बदल दिया।

इससे पहले कि हम इसमें शामिल हों, जो नहीं जानते हैं, SASS के लिए, यह सिंथेटिक रूप से बहुत बढ़िया स्टाइल शीट्स के लिए है और इसके बारे में आपको जो कुछ भी जानना है, वह स्पष्ट रूप से उनकी टैगलाइन, "CSS with superpowers" में व्यक्त किया गया है। यह आपको घोंसले के चयनकर्ताओं की तरह सामान बनाने की अनुमति देता है, लूप और फ़ंक्शंस बनाने और अन्य मज़ेदार सामान जो आप चाहते हैं कि आप सीएसएस के साथ कर सकते हैं।

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

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

यदि आप मेरे द्वारा चलाए जाने वाले कमांड को देखते हैं, तो आप देखेंगे कि इसमें

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

यहाँ उन सभी त्रुटियों की पूरी सूची दी गई है जो मेरे सामने आईं:

  • चयनकर्ता [चयनकर्ता] से पहले आने के लिए अपेक्षित चयनकर्ता [चयनकर्ता]।
  • अप्रत्याशित डुप्लिकेट [चयनकर्ता या संपत्ति]।
  • रिक्त स्थान की [संख्या] का अपेक्षित इंडेंटेशन।
  • "," के बाद अपेक्षित नई पंक्ति।
  • लाइन के अंत में अप्रत्याशित सफेद स्थान।
  • शासन से पहले खाली लाइन की उम्मीद।
  • अप्रत्याशित लापता सामान्य फ़ॉन्ट परिवार।
  • ")" के बाद अपेक्षित सफेद स्थान।
  • अप्रत्याशित लापता एंड-ऑफ-सोर्स न्यूलाइन।
  • 1 से अधिक खाली लाइन की उम्मीद नहीं है।

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

अब सास के साथ! यह इतना आसान नहीं है। जब तक निश्चित रूप से, आप पूरी तरह से आश्वस्त हैं कि आप अपनी परियोजना के साथ काम कर रहे हैं और उस विशेष परियोजना पर फिर से एसएएस का उपयोग नहीं करेंगे, तो आप बस संकलन को बंद कर सकते हैं और सभी एसएएस फाइलों को .itignignore में डाल सकते हैं, या यहां तक ​​कि बस हटा सकते हैं। उन्हें। फिर, वहां से आप अपनी सीएसएस फाइलों में मौजूदा त्रुटियों को सीधे ठीक कर सकते हैं और इसे एक दिन कह सकते हैं। लेकिन अगर आप भविष्य में किसी भी बिंदु पर उस परियोजना पर उन्हीं फाइलों पर sass का उपयोग जारी रखना चाहते हैं ... तो आपको उन त्रुटियों को sass फाइलों के माध्यम से ठीक करना होगा।

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

आपकी sass फ़ाइलों से आपकी सीएसएस फ़ाइलों में त्रुटियों को खोजना और ठीक करना सीधे आगे नहीं है क्योंकि त्रुटि संदेश आपको आपकी सीएसएस फ़ाइल में त्रुटि के लिए इंगित करता है लेकिन याद रखें कि आप अपनी सीएसएस फ़ाइलों को सीधे संपादित नहीं कर सकते हैं। तो आप sass फ़ाइल में जाने वाले हैं जो त्रुटियों के साथ css फ़ाइल को संकलित करता है और त्रुटि की उत्पत्ति को इंगित करने का प्रयास करता है। उदाहरण के लिए, main.css नामक फ़ाइल में त्रुटि के लिए आप त्रुटि खोजने और ठीक करने के लिए main.scss पर जाते हैं।

आइए कुछ त्रुटियों की जाँच करें जिनका मैंने सामना किया:

चयनकर्ता [चयनकर्ता] से पहले आने के लिए अपेक्षित चयनकर्ता [चयनकर्ता] - जब कोई समाधान नहीं हुआ तो मैंने ऑनलाइन समाधान खोजा, यह त्रुटि मेरे चारों ओर हलकों को चलाती है। इसलिए मैं वहीं समाप्त हो गया जहां मैंने अपने संपादक के टर्मिनल में त्रुटियों को घूरना शुरू कर दिया था, खाली चेहरे के साथ यह भी नहीं पता था कि कहां से शुरू किया जाए।

बाद में कई सारी बातें और परामर्श, मुझे केवल दो चीजें मिलीं जो मेरे लिए काम करने में सक्षम थीं। "आप या तो अपने चयनकर्ताओं के नामकरण से बचते हैं" (जो कि sass का उपयोग करने के पूरे उद्देश्य को हरा देता है) या "यदि आप करते हैं तो आप अपने सभी तत्वों को वर्ग नाम देते हैं" (BEM के बारे में पढ़ें)।

मुझे पता है, त्रुटि आपको बताती है कि उस चयनकर्ता से पहले इस चयनकर्ता की उम्मीद थी, इसलिए आप सोच रहे होंगे कि हम उन्हें सही क्यों नहीं करते हैं? ठीक है, अगर यह वेनिला सीएसएस था, तो निश्चित रूप से, क्यों नहीं? लेकिन sass के साथ, HTML टैग्स को css चयनकर्ताओं के रूप में (क्लासेस के बजाय) रास्ते में मिलता है। मैंने भी चीजों को इधर-उधर करने की कोशिश की, लेकिन फिर मुझे जल्द ही आभास हो गया कि मैं हलकों में घूम रहा हूं ... इन त्रुटियों में से एक को हल करने से इनमें से एक ही त्रुटि हुई।

अप्रत्याशित डुप्लिकेट [चयनकर्ता या संपत्ति] - यह तब आता है जब यह आपके सीएसएस फ़ाइल में एक चयनकर्ता के तहत डुप्लिकेट चयनकर्ताओं या डुप्लिकेट गुणों की पहचान करता है। उदाहरण के लिए…

फ़ाइल में /main.scss
@mixin bg-img {पृष्ठभूमि: {छवि: url ("../ छवि"); आकार: कवर; स्थिति: केंद्र; }}
.header {@include bg-img; // मान लें कि आप मिक्स-इन प्रॉपर्टी को ओवरराइड करना चाहते हैं, और आप इसे @include स्टेटमेंट के बाद डालेंगे। पृष्ठभूमि का आकार: 80%; }

इस में संकलित किया जाएगा ...

फ़ाइल में /main.css
.याडर {पृष्ठभूमि-छवि: url ("../ छवि"); पृष्ठभूमि का आकार: कवर; पृष्ठभूमि-स्थिति: केंद्र; पृष्ठभूमि का आकार: 80%; }

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

सैस की यह अवधारणा है "भाग" यह "7-1 आर्किटेक्चर / पैटर्न" की अवधारणा के साथ अच्छी तरह से काम करता है। वैसे मैं उनमें नहीं जाऊँगा, लेकिन आपको यह जानने की ज़रूरत है कि वे आपके कोड को अधिक मॉड्यूलर बनाने में आपकी मदद करते हैं। जिसका मूल रूप से मतलब है कि आपके कोड को छोटे-छोटे टुकड़ों में तोड़ना जो बनाए रखना और स्केल करना आसान हो।

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

फ़ाइल में /main.css
// एक आंशिक से
.याडर {प्रदर्शन: फ्लेक्स; फ्लेक्स-दिशा: स्तंभ; }
कोड की 100 लाइनों के बाद आपकी सीएसएस फ़ाइल में कहीं
// एक और आंशिक से
.याडर {पृष्ठभूमि-रंग: लाल; }

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

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

मैं अपनी sass फाइलों पर स्टाइललिंट चलाता हूं और यह पॉप अप किया जाता है ...।

बेशक, मैं इसे "- उपसर्ग" विकल्प के साथ चलाता हूं और इसने अधिकांश त्रुटियों को मिटा दिया और इसने मुझे इन के साथ छोड़ दिया।

अब, ये त्रुटियां मूल रूप से कह रही हैं कि "sinclude" और "@ mixin" जैसे कुछ विशेष नियम स्टाइललींट के लिए अज्ञात हैं। यद्यपि स्टाइलस्िंट आंशिक रूप से .scss फ़ाइल एक्सटेंशन के साथ sass फ़ाइलों के लिए काम करता है, स्टाइल स्टाइल सीएसएस के लिए है। इसलिए इन मुद्दों को हल करने के लिए मुझे अपनी स्टाइललिंट कॉन्फ़िगरेशन फ़ाइल को संपादित करना होगा और इसे उन विशिष्ट नियमों को अनदेखा करने के लिए बताना होगा, लेकिन यह देखते हुए कि कैसे यह मेरी सीएसएस फाइलों पर आगे कोई प्रभाव नहीं पड़ेगा, मैंने फैसला किया कि ये त्रुटियां लायक नहीं थीं। मुसीबत। इसलिए मैंने अपनी सभी sass फाइलों को अपनी .gitignore फाइल में जोड़कर उनसे छुटकारा पा लिया और इसने यह चाल चली।

मेरे सास फाइलों पर स्टाइललींट चलाने का कारण यह था कि मैं स्टिकलर का उपयोग करता हूं, जो मूल रूप से आपके दूरस्थ जीथब रिपॉजिटरी पर लिंटर चेक चलाता है। यह मूल रूप से उन्हीं जाँचों को करने के लिए आपकी परियोजना में लिंटर कॉन्फ़िगरेशन फ़ाइलों में परिभाषित नियमों का उपयोग करता है जो आप आमतौर पर स्टाइललिंट के साथ करते हैं। को छोड़कर, जब आप चुन सकते हैं कि स्थानीय स्तर पर स्टाइललिंट को चलाने के लिए कौन सी फाइलें हैं, तो दूसरी ओर स्टिकलर आपकी सभी शैली की फाइलों की जांच करता है जिसमें आपकी एसएएस फाइलें शामिल होंगी।

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

निष्कर्ष

सैस महान और बहुत उपयोगी है, यह डेवलपर के लिए जीवन को आसान बनाता है। मैं अब किसी अन्य तरीके से कोडिंग की कल्पना नहीं कर सकता कि मैं इसके आकर्षण से संक्रमित हो गया हूं।

मैं एक अनपेक्षित दीवार में दौड़ता हूं, जिसने लगभग sass के बारे में मेरा विचार बदल दिया और जब मैंने इसे काबू कर लिया, तो मुझे लगा कि मुझे किसी को फंसने की स्थिति में साझा करना चाहिए। परमेश्वर जानता है कि मैंने अन्य लोगों के लेखों से बहुत लाभ उठाया है। जिसके बारे में बोलते हुए, यह तकनीक BEM और SASS में वर्णित है: एंडी बार्न्स द्वारा एक परफेक्ट मैच आपको परेशान करने वाली त्रुटियों से भविष्य के सबूत के लिए जाना जाएगा और आपके कोड को बनाए रखने या स्केल करने पर भी काम में आएगा।