बनाम बनाम कम

"सीएसएस के लिए मुझे कौन सी प्रीप्रोसेसर भाषा का उपयोग करना चाहिए?" हाल ही में एक बहुत ही सामयिक मुद्दा रहा है। कई बार मुझसे व्यक्तिगत रूप से इस बारे में पूछा गया था, और ऐसा लगता है कि हर दो दिन में यह सवाल नेट पर उठाया जाता था। यह बहुत सुखद है कि बातचीत किस भाषा की चर्चा सबसे अच्छी है, इसके पक्ष-विपक्ष के पक्ष और विपक्ष के विषय से चले गए। कारण के लिए!

संक्षिप्त होने के लिए: SASS।

थोड़ा विस्तृत जवाब: सभी गिनती पर बेहतर है, लेकिन अगर आप पहले से ही खुश हैं, तो यह अच्छा है, कम से कम आपने पहले से ही प्रीप्रोसेसिंग का उपयोग करके अपने जीवन को सरल बना दिया है।

विस्तृत जवाब: नीचे

रूबी और कमांड लाइन के साथ प्रशिक्षण कार्यक्रम

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

विजेता: नहीं।

CSS3 की मदद करने के लिए

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

तो यह सब निम्नलिखित के लिए उबालता है : एसएएसएस में कम्पास है, जबकि लेस नहीं है । वास्तव में, सब कुछ थोड़ा भ्रमित है। LESS के लिए कम्पास प्रकार की परियोजना बनाने के सभी प्रयास विफल रहे हैं। तथ्य यह है कि LESS सही ढंग से करने के लिए एक मजबूत पर्याप्त भाषा नहीं है। यह नीचे थोड़ा और विस्तृत होगा।

विजेता: SASS

भाषा की क्षमता: तर्क / चक्र

LESS आपको "संरक्षित अशुद्धियों" को बनाने की अनुमति देता है। ये अशुद्धियाँ तभी प्रभावी होंगी जब स्थिति सही होगी। मान लीजिए कि आप पृष्ठभूमि का रंग बदलना चाहते हैं, जो वर्तमान पाठ रंग पर निर्भर करेगा। यदि पाठ का रंग "हल्का पर्याप्त" है, तो आप शायद एक अंधेरे पृष्ठभूमि बनाना चाहते हैं। यदि यह "अंधेरा पर्याप्त" है - आप एक हल्की पृष्ठभूमि चाहते हैं। इस प्रकार, आपको इन "रक्षकों" के साथ दो भागों में विभाजित एक प्रवेश मिलेगा, जो गारंटी देता है कि उनमें से केवल एक को निष्पादित किया जाएगा।

कम

.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) { background: black; } .set-bg-color (@text-color) when (lightness(@text-color) < 50%) { background: #ccc; } 

उपयोग के बाद, आपको एक उपयुक्त पृष्ठभूमि मिलेगी:

कम

 .box-1 { color: #BADA55; .set-bg-color(#BADA55); } 

यह बहुत सरल है, लेकिन सार, मुझे आशा है, स्पष्ट है। आप चीजों को उससे ज्यादा ठंडा कर सकते हैं। LESS आपको आत्म-पुनरावृत्ति करने की भी अनुमति देता है, जिसकी अशुद्धियां स्वयं को अद्यतन मूल्यों के साथ पैदा कर सकती हैं।

कम

 .loop (@index) when (@index > 0) { .myclass { z-index: @index; } // Call itself .loopingClass(@index - 1); } // Stop loop .loopingClass (0) {} // Outputs stuff .loopingClass (10); 

यह वह जगह है जहाँ कम अंत में तर्क / चक्र है। एसएएसएस में प्रासंगिक तार्किक और चक्रीय ऑपरेटर हैं। यदि / तो / अन्यथा, लूप के लिए, जबकि लूप और प्रत्येक लूप के लिए। बिना किसी ट्रिक, रियल प्रोग्रामिंग के। SASS एक काफी विश्वसनीय भाषा है, जो कम्पास का उपयोग करना संभव बनाता है।

उदाहरण के लिए, कम्पास में background का एक मिश्रण होता background , जो इतना शक्तिशाली होता है कि आप जो चाहें उसमें डाल सकते हैं और अंततः वही प्राप्त कर सकते हैं जिसकी आपको आवश्यकता है। चित्र, ग्रेडिएंट और उनमें से कोई भी संयोजन, एक अल्पविराम द्वारा अलग किया जाता है - और आपको वांछित परिणाम (उपसर्ग और बाकी सब सहित) मिलता है।

कोड का लैकोनिक टुकड़ा:

एससीएसएस

 .bam { @include background( image-url("foo.png"), linear-gradient(top left, #333, #0c0), radial-gradient(#c00, #fff 100px) ); } 

यह कोड नीचे एक राक्षस में बदल जाता है (जो, दुर्भाग्य से, क्रॉस-ब्राउज़र संगतता के लिए आवश्यक है):

सीएसएस

 .bam { background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff)); background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px); } 

विजेता: SASS

साइटों

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

विजेता: कम

@ कॉन्सेप्ट को अपनाएं

मान लीजिए कि आप शैलियों के एक निश्चित समूह के साथ एक वर्ग बनाते हैं। फिर आपको एक और एक बनाने की ज़रूरत है जो पिछले एक की तरह होगी, लेकिन कुछ अतिरिक्त के साथ। LESS आपको इसे इस तरह से करने की अनुमति देता है:

कम

 .module-b { .module-a(); /* Copies everything from .module-a down here */ border: 1px solid red; } 

संक्षेप में, यह सामान्य "शामिल" है। आप इस प्रविष्टि का उपयोग SASS में भी कर सकते हैं, लेकिन @extend का उपयोग करके ऐसा करना बेहतर है। @extend केवल @extend .module-a .module-b (जो फ़ाइल को .module-b ) से शैलियों की प्रतिलिपि नहीं @extend है, यह .module-a चयनकर्ता का नाम परिवर्तित करता है .module-a, .module-b संकलित CSS में (जो अधिक कुशल है) विधि)।

एससीएसएस

 .module-a { /* A bunch of stuff */ } .module-b { /* Some unique styling */ @extend .module-a; } 

इसके संकलन:

सीएसएस

 .module-a, .module-b { /* A bunch of stuff */ } .module-b { /* Some unique styling */ } 

क्या आप इसे देखते हैं? SASS चयनकर्ताओं से आगे निकल जाता है, और यह एक अधिक कुशल तरीका है।

विजेता: SASS

चर प्रसंस्करण

LESS @ का उपयोग करता है, SASS $ का उपयोग करता है। डॉलर का चिह्न CSS में उपयोग नहीं किया गया है, जो @ के लिए नहीं कहा जा सकता है। इसका उपयोग @keyframes या @media ब्लॉक घोषित करने के लिए किया जाता है। आप यह विचार कर सकते हैं कि एक या किसी अन्य विशेष चरित्र का उपयोग स्वाद का मामला है, लेकिन मुझे लगता है कि एसएएसएस का यहां एक फायदा है क्योंकि यह मूल अवधारणाओं को भ्रमित नहीं करता है।

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

एससीएसएस

 $color: black; .scoped { $color: white; color: $color; } .unscoped { // LESS = black (global) // SASS = white (overwritten by local) color: $color; } 

यह चाल उपयोगी हो सकती है, लेकिन यह बिल्कुल सहज नहीं है, खासकर यदि आप जावास्क्रिप्ट में लिख रहे हैं।

विजेता: आपको एक सिक्का फेंकना है :)

मीडिया नियमों के साथ काम करना

हममें से लगभग हर एक, @media नियमों के साथ काम करना शुरू कर रहा है, मुख्य शैलियों पृष्ठ के निचले भाग में उनके साथ ब्लॉक जोड़ता है। यह काम करता है, लेकिन उदाहरण के लिए शैलियों को अलग करता है:

सीएसएस

 .some-class { /* Default styling */ } /* Hundreds of lines of CSS */ @media (max-width: 800px) { .some-class { /* Responsive styles */ } } 

SASS या LESS का उपयोग करके, आप अटैचमेंट का उपयोग करके इन शैलियों को जोड़ सकते हैं।

एससीएसएस

 .some-class { /* Default styling */ @media (max-width: 800px) { /* Responsive styles */ } } 

"रिस्पोंड-टू" एक बहुत ही अच्छी SASS तकनीक है ( क्रिस एप्पस्टीन , बेन श्वार्ज और जेफ क्रॉफ्ट के लिए कोड देखें)।

एससीएसएस

 =respond-to($name) @if $name == small-screen @media only screen and (min-width: 320px) @content @if $name == large-screen @media only screen and (min-width: 800px) @content 

तो फिर तुम उन्हें बहुत रसीला उपयोग कर सकते हैं:

एससीएसएस

 .column width: 25% +respond-to(small-screen) width: 100% 

नोट: इस तकनीक का उपयोग करने के लिए आपको SASS 3.2 की आवश्यकता होगी, जो अभी भी अल्फा में है, आप इसे gem install sass --pre साथ स्थापित कर सकते हैं। मुझे लगता है कि इसमें कोई संदेह नहीं होना चाहिए कि यह विकास में वास्तव में उपयोगी चीज है।

विजेता: SASS

Metematika

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

कम

 div { width: 100px + 2em; // == 102px (weird) } 

SASS आपके लिए यह स्पष्ट कर देगा कि त्रुटि यहाँ छिपी है:
Incompatible units: 'em' and 'px' । बेशक, यह एक मूट बिंदु है, जो बेहतर है - एक गलती या एक गलत मूल्य, लेकिन व्यक्तिगत रूप से, मैं पहली बार हूं। खासकर यदि आप संख्याओं का उपयोग करने के बजाय चर पसंद करते हैं, तो इससे उन्हें ट्रैक करना बहुत मुश्किल हो जाता है।

एसएएसएस आपको माप की "अज्ञात" इकाइयों के साथ गणितीय संचालन करने की अनुमति देता है, जो अगले अपडेट से पहले दिखाई दे सकता है। LESS इसकी अनुमति नहीं देता है। यहां तक ​​कि अजनबी मतभेद भी हैं, उदाहरण के लिए, एसएएसएस इकाइयों के साथ संख्याओं को कैसे गुणा करता है, लेकिन आज ऐसा नहीं है।

विजेता: SASS (एक खिंचाव के साथ)

विकास

एक लेख लिखते समय ...

LESS से खुले प्रश्नों की संख्या : 392
खुले SASS प्रश्नों की संख्या : 84

पूल अनुरोध (लंबित) कम: 86
पूल अनुरोध (लंबित) SASS: 3

पिछले महीने के लिए कमिट्स की संख्या : 11
पिछले महीने के लिए आवागमन की संख्या SASS: 35

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

विजेता: शायद SASS

आदर

• क्रिस एप्पस्टीन: SASS / LESS तुलना
• जेरेमी हिक्सन: एक परिचय कम करने के लिए, और तुलना की तुलना करें
• केन कॉलिन्स: बहुत कम? क्या आपको सैस का उपयोग करना चाहिए?
• जॉनाथन क्रूम: सैस बनाम कम बनाम स्टाइलस: प्रीप्रोसेसर शूटआउट