कम-सास-स्विच -01

वेनिला सीएसएस से एक सीएसएस प्रीप्रोसेसर में स्विच करने के बारे में बहुत कुछ लिखा गया है, और अच्छे कारण के लिए - प्रीप्रोसेसर शक्ति और नियंत्रण जोड़ते हैं जो हम अकेले ब्राउज़र में नहीं प्राप्त कर सकते हैं। लेखों से कि एक प्रीप्रोसेसर के गुणों को बाहर निकालना Etsy के विस्तृत की तरह अधिक तकनीकी पढ़ता है ' स्केल पर SCSS में संक्रमण , 'मुझे लगता है कि मैंने उन सभी को खा लिया है।





पर एहसान , हमने कुछ ऐसा किया है जिसके बारे में लगभग नहीं लिखा गया है - एक प्रीप्रोसेसर से दूसरे में स्विच करना। जल्दी, स्प्राउट को अपनाया कम ; हमने SCSS, CSS जैसे सिंटैक्स पर स्विच करने के लिए पिछले साल देर से निर्णय लिया सास । हमने यह सुनिश्चित करने के लिए अपना समय लिया कि संक्रमण सुचारू था, और अनुभव ने लेस और सैस के बीच कुछ गहरे अंतरों पर प्रकाश डाला।



क्यों?

इससे पहले कि हम सीखें कि हमने क्या सीखा, आपका पहला सवाल - एक वैध होना चाहिए - 'क्यों परेशान?' हम पहले से ही चर और मिश्रण, @ निर्यात और रंग कार्यों से लाभान्वित हुए हैं। निश्चित रूप से, Sass में कई विशेषताओं की कमी है, जैसे कि एमएपीएस तथा कार्यों , लेकिन हमने इसे उनके बिना दूर कर दिया।



स्विच आउट करने के दो प्रमुख कारण:

  1. समुदाय: लिबास एक्सटेंशन के लिए जीथब खोजें: एससीएस, फिर लिबास एक्सटेंशन के लिए खोजें: कम। इस लेखन के अनुसार, परिणाम स्पष्ट हैं: 120,234 एससीएसएस फाइलें, 29,449 कम फाइलें। स्विचिंग अच्छे विचारों की एक विस्तृत श्रृंखला तक पहुँच प्रदान करता है और तैरने के लिए एक बड़ा खुला स्रोत पूल है। यहां तक ​​कि लोकप्रिय बूटस्ट्रैप लाइब्रेरी, कम होने के कारणों में से एक व्यवहार्य है, ने घोषणा की है यह SCSS में बदल रहा है
  2. गति: लिबास चट्टानों। हमारी शैलियों का निर्माण समय 500% से अधिक बढ़ गया। जबकि लिबास ने अभी तक सैस कल्पना के नवीनतम संस्करण के साथ नहीं पकड़ा है, हमें नहीं लगता कि हम कुछ भी याद कर रहे हैं।

कैसे?

हमारे संकलित सीएसएस में लगभग 19,000 चयनकर्ता हैं। स्विच के बाद, उस संकलित सीएसएस को लगभग समान होने की आवश्यकता थी; हमें यह सुनिश्चित करना था कि यह संक्रमण हमारे ग्राहकों के लिए अदृश्य था। और वर्तमान में क्या सुविधाएँ हैं? हमारी हाल ही में रचना अद्यतन शैलियों की 3,837 पंक्तियां बदलीं- वह टीम सुरक्षित रूप से मिडस्ट्रीम को कैसे बदल सकती है?

हमने तीन विकल्पों पर विचार किया:



  1. पहले CSS के लिए सब कुछ संकलित करें। यह 100% सटीकता के साथ सुनिश्चित करने का एकमात्र तरीका है कि हमारे उपयोगकर्ता एक ही शैली प्राप्त कर रहे थे और वास्तव में एक दिन में स्विच को बंद कर दें। एक साफ ब्रेक का विचार हमेशा मोहक होता है, लेकिन नया कोड हमेशा बेहतर कोड नहीं होता है । यहां तक ​​कि जैसे उपकरण के साथ सैस-कन्वर्ट तथा css2compass जिस समय हम पुनर्निर्माण में खर्च करेंगे वह किसी भी अन्य विकल्प से बहुत आगे निकल जाएगा।
  2. केवल SCSS में नई शैली लिखें। हमने रेत में एक रेखा खींचने पर विचार किया- कम पुराना और पर्दाफाश है; सैस नया हॉटनेस है । अंतत: हमने इस धारणा को खारिज कर दिया। इतना तुरंत स्विचिंग से प्राप्त किया जाएगा, और कोई भी मिश्रण और चर के दो सेटों के बीच समानता नहीं रखना चाहता था।
  3. हमारी सभी कम फ़ाइलों को SCSS में बदलें और जो टूटता है उसे ठीक करें। इतिहास को फेंकने या बनाए रखने के लिए एक और निर्माण कार्य को जोड़ने के साथ सामना किया, हमने सब कुछ बदलने के बारे में निर्धारित किया।

घर की सफाई

SCSS कम से अलग नहीं है, क्या यह है? “ कम से सास में परिवर्तित 'रेगेक्स खोजों की एक श्रृंखला को सबसे स्पष्ट वाक्यविन्यास अंतर को बदलने के लिए साझा करता है, जैसे कि .awesome-मिक्सिन () बनाम @mixin भयानक-मिक्सिन ()। उन रेगेक्स खोजों को ऊपर रोल किया गया है कम 2sass , जिसे हमने अपनी सभी फाइलों के माध्यम से चलाया।



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

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



फिक्सिन के मिक्सिन

हमने इस अंतर के साथ शुरू किया कि कैसे कम और सैस सशर्त को संभालते हैं। यहाँ हमारे पास एक साधारण ढाल मिश्रण है:



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



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

यहां हमारे अनुभव से एक अच्छा सबक: जो आप हटा सकते हैं, उसे परिवर्तित करने या फिर से तैयार करने में समय बर्बाद न करें।

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


777 भगवान की संख्या

एम्परसेंड एब्यूज

मिक्सिंस को संबोधित करने के बाद, हमने अपना ध्यान बिल्ड त्रुटियों के एक अन्य स्रोत की ओर दिया: ऐम्परसेंड । यह Sass और Less दोनों में सबसे शक्तिशाली ऑपरेटरों में से एक है, और वे बहुत समान रूप से काम करते हैं। सिवाय इसके कि वे कब नहीं। और फिर वे बहुत अलग तरीके से काम करते हैं।

उदाहरण के लिए, 19,000 चयनकर्ताओं के साथ, आप कल्पना कर सकते हैं कि हम विशिष्टता की समस्याओं में भाग लेते हैं, अक्सर इस तरह से हल किया जाता है:

कम h1.modal- हैडर पैदा करता है क्योंकि एक को संदेह होगा, लेकिन सास चोक हो जाएगा। हमने इसे ठीक करने की कोशिश की:

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

यह तब और खराब हो गया जब मिक्स में इस तरह से एम्परसेंड का इस्तेमाल किया गया। यहाँ बटन के लिए हमारे पास कम मिक्सिन का एक अंश है:

फिर, @ एट-रूट निर्देश हमें लिबास में मदद नहीं कर सकता। इस मामले में, हमें विशिष्टता ओवरराइड के मूल कारण को देखना होगा और इसे हल करना होगा। (अच्छी खबर यह है कि हमने इसे तीन-विशिष्ट शैलियों को कहीं और हटाकर तय किया है।)

कम और सास एम्परसेंड के बीच एक और अंतर वास्तव में मददगार था:

हमारी अपेक्षा थी।। चेकबॉक्स-रैप> .चेकबॉक्स-विजेट, .radio-लपेट> .radio- विजेट। हालाँकि, एम्परर्सैंड कम प्रक्रियाओं को अधिक पुनरावृत्ति और इस प्रकार संकलित करता है:

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

सबक सीखा: अपने संकलित सीएसएस को अक्सर देखें- अन्यथा, आप नहीं जानते कि आपके उपयोगकर्ता क्या डाउनलोड कर रहे हैं।

परिणामों की तुलना करना

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

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

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

स्वरूपण को सामान्य करने से बहुत मदद मिली, लेकिन इस अंतर से जूझने में अभी भी समीक्षा के दो ठोस दिन लगे। एक पुरस्कृत प्रक्रिया लेकिन कठिन। हमें संदेह है कि कस्टम एएसटी समाधान ने समीक्षा को गति देने में मदद की होगी। सभी अंतरों को संबोधित करना था।

लेकिन मतभेद मामूली थे। कुछ अलग क्रम में चयनकर्ता, दशमलव गोलाई और रंग कार्यों के परिणामों में मामूली अंतर भी। हमारे Sassed-up CSS को उत्पादन में धकेलने से पहले प्रत्येक अंतर को ध्यान से जांचा गया था।

आगे क्या होगा

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

अब हम पैटर्न की पहचान के साथ आगे बढ़ रहे हैं, बड़ी सीएसएस फाइलों को मॉड्यूल में तोड़ रहे हैं, अप्रयुक्त चयनकर्ताओं के लिए उत्पादन में सीएसएस का ऑडिट कर रहे हैं और एएसटीएस या हमारे सीएसएस के कुछ अन्य पार्स प्रतिनिधित्व का तुलना करने के लिए उपकरणों पर अधिक समय बिता रहे हैं। क्या मैंने उल्लेख किया है कि हमारे पास लगभग 19,000 CSS चयनकर्ता हैं? हम इस पर हैं - लेकिन यह पूरी तरह से एक और लेख है।

अपने दोस्तों के साथ साझा करें: