SASS का उपयोग करके स्वचालित शैली विभाजन

SASS का उपयोग करने वाले लोगों के लिए एक पोस्ट और सीमित मानव संसाधनों के साथ बड़ी शैली की फ़ाइलों के अनुकूलन की समस्याओं को हल करना।

दिए गए:

1. 50+ टेम्पलेट्स के साथ बड़ी साइट।
2. बड़ी स्टाइलशीट।
3. साइट लगातार विकसित हो रही है, बग्स तय हो रहे हैं, नई कार्यक्षमता लिखी जा रही है।
4. एक शाखा में विकास और उत्पादन का संस्करण, एसवीएन रिपॉजिटरी।
5. इस पूरी अर्थव्यवस्था को बनाए रखने के लिए 1-2 लोग।
6. पागल न होने और खुद पर हाथ न रखने की बड़ी इच्छा!

यदि आप इस महाकाव्य के अंत में रुचि रखते हैं तो आपका स्वागत है बिल्ली के लिए

प्रागितिहास

कुछ समय पहले, मुझे एक बड़ी परियोजना मिली जो तीन लोगों ने मेरे सामने लिखी थी। वैसे, ये लोग "दुष्ट डेवलपर" के बारे में एक भयानक कहानी से आए थे, जिन्होंने स्वतंत्र ब्लॉक, प्रीप्रोसेसर और किसी भी अन्य अनुकूलन के बारे में कभी नहीं सुना था। बेशक, मैं ऐसा सब कुछ नहीं छोड़ सकता था, और अविश्वसनीय उत्साह के साथ मैंने सब कुछ फिर से लिखना शुरू कर दिया। और फिर से लिखने के लिए, मैं आपको बताऊंगा, वह था। सभी शैलियों को कई फाइलों में एकत्र किया गया था, जिनमें से सबसे बड़ी कुल 16k लाइनें थीं। यह बस इन ऑगियन अस्तबल को चकित करने की प्रक्रिया में है, और मैं एक समस्या में भाग गया।

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

अवधारणा इस प्रकार है

• संकलन केवल वैश्विक फ़ाइलों के माध्यम से होता है, जिसमें सभी संकलन और संदर्भ पैरामीटर कॉन्फ़िगर किए जाते हैं। इन फ़ाइलों में, हम वैरिएबल पास करते हैं जो मान निर्दिष्ट करते हैं:
  
  • वह संदर्भ जो साइट के किस भाग को परिभाषित करता है, हम शैलियों को किससे जोड़ेंगे,
  • ब्राउज़र संस्करण
  • संस्करण का निर्माण (विकास या उत्पादन),
  • कोई अन्य चर।
  
  
• फ्रेमवर्क स्तर पर, एक टेम्प्लेट बनाया जाता है जिसके द्वारा वैश्विक फाइलें उत्पन्न की जाती हैं। एक प्रति नियंत्रक या दृश्य, आप तय करते हैं। इन फ़ाइलों में संदर्भ चर और नाम नियंत्रक / दृश्य का नाम है। सफल पीढ़ी के बाद, ये फाइलें स्वचालित रूप से सीएसएस फाइलों के रूप में संबंधित नियंत्रकों / विचारों से जुड़ी होती हैं।
• सभी शैली की फाइलें मिक्सी में लिपटे हुए हैं, जो संकलित होने पर, स्वचालित रूप से निर्दिष्ट संदर्भ चर के अनुसार शैलियों को सॉर्ट करते हैं। यदि इनमें से कई चर हैं, तो आप वैश्विक फ़ाइलों में निर्दिष्ट किसी भी चर द्वारा फ़ाइल के अंदर अतिरिक्त छँटाई कर सकते हैं।
• एक अतिरिक्त बोनस के रूप में, इस प्रणाली का उपयोग करते समय, आप शैलियों के कई संस्करणों को एक स्थान पर संग्रहीत कर सकते हैं। उदाहरण के लिए, उत्पादन और विकास, विभिन्न ब्राउज़रों और उनके संस्करणों के लिए शैलियों के अनुरूप कार्यक्षमता।

शैलियों के संकलन के लिए टेम्पलेट मॉडल

//   $develop: false; $production: true; ... //          $all: true; $ie9: false; ... //    $doc: false; //     $local_var: global; //      //                $holydat_var: 8march; //       @import "includes"; 

सभी शैलियों के आयात के साथ वैश्विक फ़ाइल मॉडल

 //      @import "includes/global_var"; //      @import "fonts"; @import "header"; @import "login"; @import "news"; @import "jquery.ui.all"; @import "factory"; @import "rooms"; @import "invite"; ... 

एक व्यक्तिगत नियंत्रक के लिए मॉडल फ़ाइल मॉडल

 //         ""   @include style_separator("  1", ..."  N"){ //        @include sub_style_separator("  1"){ .selector{ ... } } //        @include sub_style_separator("  N"){ .selector2{ ... } } .selector3{ ... } ... } 

एक व्यक्तिगत नियंत्रक के लिए मॉडल फ़ाइल मॉडल

 //       @mixin style_separator($var: false, ... $varN: false) { @if $var == $local_var or ... $varN == $local_var { @content; } } @mixin sub_style_separator($var: false, ... $varN: false) { @if $var == $local_var or ... $varN == $local_var { @content; } } 

कुल मिलाकर

नतीजतन, हमें एक ऐसी प्रणाली मिलती है जिसमें समय और तैयारी के गंभीर निवेश की आवश्यकता नहीं होती है। सरलतम उपयोग के लिए, SASS में केवल ज्ञान की आवश्यकता है। इसके अलावा, यह दृष्टिकोण शैलियों को व्यवस्थित करने, अलग करने और कनेक्ट करने में बहुत समय खर्च नहीं करना संभव बनाता है। सिस्टम का परीक्षण मेरे द्वारा एक बड़ी परियोजना पर किया गया है, लेकिन पहले से ही इसकी प्रभावशीलता दिखाई गई है। मुझे किसी भी तरह की आलोचना करने में खुशी होगी!

पुनश्च

भरवां शंकु के लिए युक्तियाँ:

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