सीएसएस प्रीप्रोसेसर अधिक बनाम बनाम लेस

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

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

शुरू करते हैं.

स्थापना

बहुत मौलिक कदम से शुरू करते हैं, स्थापना. Sass और LESS दोनों अलग-अलग प्लेटफ़ॉर्म पर बने हैं, Sass रूबी पर चल रही है जबकि LESS एक जावास्क्रिप्ट लाइब्रेरी है (जो यह है था वास्तव में रूबी पर भी बनाया गया था सर्वप्रथम).

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

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

निष्कर्ष: कम स्पष्ट रूप से प्रमुख है.

एक्सटेंशन

Sass और LESS दोनों के पास तेजी से और आसान वेब विकास के लिए एक्सटेंशन हैं.

सास: हमारी पिछली पोस्ट में, हमने कम्पास के बारे में चर्चा की थी, जो वर्तमान और लोकप्रिय सास-आधारित एक्सटेंशन है। कम समय में CSS3 के सिंटैक्स को लिखने के लिए Compass में कई मिक्सिन्स हैं.

लेकिन कम्पास सिर्फ CSS3 मिक्सिन्स से परे है, इसने अन्य बहुत उपयोगी सुविधाओं जैसे कि हेल्पर्स, लेआउट, टाइपोग्राफी, ग्रिड लेआउट और यहां तक ​​कि स्प्राइट इमेजेज को भी जोड़ा है। इसमें यह भी है config.rb फ़ाइल जहां हम सीएसएस आउटपुट और कुछ अन्य वरीयताओं को नियंत्रित कर सकते हैं। तो, संक्षेप में, कम्पास, सास के साथ वेब विकास करने के लिए एक सभी में एक पैकेज है.

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

यहां कुछ LESS एक्सटेंशन दिए गए हैं जिन्हें आपको अपनी परियोजना में शामिल करने की आवश्यकता हो सकती है:

• CSS3 मिश्रण: एलईएस एलिमेंट्स, प्रीबूट, लेस मिक्सिन्स.
• ग्रिड: 960.gs, Frameless, Semantic.gs
• ख़ाका: और भी कम
• विविध: ट्विटर बूटस्ट्रैप

निष्कर्ष: मुझे लगता है कि हमें सास और कम्पास से सहमत होना होगा, एक महान जोड़ी है और स्प्राइट इमेज फीचर वास्तव में किकसैट है, इसलिए यहां सास के लिए एक बिंदु.

बोली

हर CSS Preprocessor की अपनी भाषा होती है और वे ज्यादातर आम होती हैं। उदाहरण के लिए, Sass और LESS दोनों में वैरिएबल हैं, लेकिन इसमें कोई महत्वपूर्ण अंतर नहीं है, सिवाय Sass के साथ चर को परिभाषित करता है $ साइन इन करें जबकि LESS यह एक के साथ करता है @ संकेत। वे अभी भी वही काम करते हैं: एक स्थिर मूल्य संग्रहीत करें.

नीचे, हम Sass और LESS दोनों में सबसे अधिक इस्तेमाल की जाने वाली भाषाओं की जाँच करेंगे (मेरे अनुभव के आधार पर).

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

घोंसला नियम बार-बार चयनकर्ताओं को लिखने से बचने के लिए अच्छा अभ्यास है और घोंसले के शिकार नियमों में सास और लेस दोनों का फैशन एक जैसा है;

सैस / एससीएस और लेस

 नौसेना मार्जिन: 50 पीएक्स ऑटो 0; चौड़ाई: 788px; ऊंचाई: 45 पीएक्स; उल पैडिंग: 0; मार्जिन: 0;  

लेकिन Sass / Scss इस पद्धति को एक कदम आगे ले जाता है जिससे हमें व्यक्तिगत गुणों को भी घोंसला बनाने की अनुमति मिलती है, यहाँ एक उदाहरण है:

 नौसेना मार्जिन: 50 पीएक्स ऑटो 0; चौड़ाई: 788px; ऊंचाई: 45 पीएक्स; उल पैडिंग: 0; मार्जिन: 0;  सीमा: शैली: ठोस; बायां: चौड़ाई: 4px; रंग: # 333333;  सही: चौड़ाई: 2px; रंग: # 000000;  

यह कोड निम्नलिखित आउटपुट उत्पन्न करेगा.

 नौसेना मार्जिन: 50 पीएक्स ऑटो 0; चौड़ाई: 788px; ऊंचाई: 45 पीएक्स; सीमा-शैली: ठोस; बॉर्डर-लेफ्ट-चौड़ाई: 4px; बॉर्डर-लेफ्ट-कलर: # 333333; बॉर्डर-राइट-चौड़ाई: 2 पीएक्स; बॉर्डर-राइट-रंग: # 000000;  नौसेना उल गद्दी: 0; मार्जिन: 0;  

निष्कर्ष: व्यक्तिगत गुणों का घोंसला बनाना एक अच्छा जोड़ है और माना जाता है सर्वश्रेष्ठ प्रणालियां, खासकर अगर हम DRY (अपने आप को दोहराए नहीं) सिद्धांत का पालन करते हैं। इसलिए, मुझे लगता है कि यह स्पष्ट है कि इस मामले में कौन बेहतर कर रहा है.

मिश्रण और चयनकर्ता वंशानुक्रम

सास और लेस में मिश्रण को थोड़ा अलग तरीके से परिभाषित किया गया है। सास में हम उपयोग करते हैं@mixin LESS में निर्देशन करते समय हम इसे कक्षा चयनकर्ता के साथ परिभाषित करते हैं। यहाँ एक उदाहरण है:

सास / एससीएसएस

 @ मोमिन सीमा-त्रिज्या ($ मान) सीमा-त्रिज्या: $ मूल्य;  नौसेना मार्जिन: 50 पीएक्स ऑटो 0; चौड़ाई: 788px; ऊंचाई: 45 पीएक्स; @include बॉर्डर-त्रिज्या (10px);  

कम से

 .बॉर्डर (@radius) बॉर्डर-रेडियस: @radius;  नौसेना मार्जिन: 50 पीएक्स ऑटो 0; चौड़ाई: 788px; ऊंचाई: 45 पीएक्स; .border (10px);  

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

इस उदाहरण को नीचे देखें:

 .सर्कल बॉर्डर: 1px ठोस #ccc; सीमा-त्रिज्या: 50 पीएक्स; छिपा हुआ सैलाब;  .avatar @extend। circle;  

इस कोड के परिणामस्वरूप होगा;

 .सर्कल, .avatar बॉर्डर: 1px ठोस #ccc; सीमा-त्रिज्या: 50 पीएक्स; छिपा हुआ सैलाब;  

निष्कर्ष: अलग मिक्स एंड सेलेक्टर्स इनहेरिटेंस द्वारा सैस एक कदम आगे है.

संचालन

सास और लेस दोनों ही बुनियादी गणित संचालन कर सकते हैं, लेकिन कभी-कभी वे अलग-अलग परिणाम देते हैं। देखें कि वे इस यादृच्छिक गणना को कैसे करते हैं:

सास / एससीएसएस

 $ मार्जिन: 10 पीएक्स; div मार्जिन: $ मार्जिन - 10%; / * सिंटैक्स त्रुटि: असंगत इकाइयाँ: '%' और 'px' * / 

कम से

 @margin: 10px; div मार्जिन: @margin - 10%; / * = 0px * / 

निष्कर्ष: सास, इस मामले में, इसे और अधिक सटीक रूप से कर रही है; चूंकि% और px समतुल्य नहीं है, इसलिए इसे एक त्रुटि वापस करनी चाहिए। हालांकि, मुझे वास्तव में उम्मीद है कि यह कुछ ऐसा हो सकता है 10px - 10% = 9px.

त्रुटि सूचनाएँ

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

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

जब मैंने पहली बार इस अधिसूचना को देखा, तो मैं शायद ही इसे समझ सका। इसके अलावा, ऐसा लगता है कि Sass जहां त्रुटि है, उससे थोड़ा दूर है। इसमें कहा गया कि त्रुटि जारी है पंक्ति 7, 6 के बजाय.

कम से: एक ही त्रुटि परिदृश्य के साथ, LESS अधिसूचना अधिक सुव्यवस्थित है और यह अधिक सटीक भी प्रतीत होती है। इस स्क्रीनशॉट पर एक नज़र डालें:

निष्कर्ष: LESS इस मामले में बेहतर अनुभव प्रदान करता है, और हाथों को जीतता है.

प्रलेखन

प्रलेखन हर उत्पाद के लिए बहुत महत्वपूर्ण हिस्सा है; यहां तक ​​कि अनुभवी डेवलपर्स के बिना चीजों को करना मुश्किल होगा प्रलेखन.

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

प्रस्तुति W3 प्रलेखन या विकीपीडिया की तरह बहुत अधिक है। मुझे नहीं पता कि यह इंटरनेट में प्रलेखन प्रदर्शित करने का मानक है, लेकिन यह एकमात्र तरीका नहीं है.

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

निष्कर्ष: लेस डॉक्यूमेंटेशन प्रेजेंटेशन बेहतर है, हालांकि सैस के पास अधिक व्यापक दस्तावेज हैं, इसलिए मुझे लगता है कि हम इसे एक टाई कह सकते हैं.

फाइनल थॉट

मुझे लगता है कि यह एक स्पष्ट निष्कर्ष है सस बेहतर है के कुल स्कोर के साथ 5 बनाम 3 कम में। हालांकि, इसका मतलब यह नहीं है कि लेस खराब है; उन्हें बस बेहतर होने की जरूरत है। अंत में, यह अभी भी अंत-उपयोगकर्ता के निर्णय पर निर्भर करता है कि वे अपनी पसंद के प्रीप्रोसेसर को चुनें। जब तक वे सहज और अधिक उत्पादक होते हैं, तब तक वह सास या कम हो, तो वह उनकी सूची में विजेता है.

अंत में, यदि आपके पास इस विषय के बारे में कुछ है, तो नीचे दिए गए टिप्पणी बॉक्स में साझा करने के लिए स्वतंत्र महसूस करें.