LESS और SASS के बीच अंतरों का संक्षिप्त अवलोकन

कल मैंने LESS के विस्तृत अध्ययन और एसएएसएस / एससीएसएस से भिन्न अंतर पर आधा दिन बिताया।

SASS सिंटैक्स मुझे अपनी संक्षिप्तता के लिए SCSS से अधिक की अपील करता है। लेकिन एसएएसएस में शैलियों का एक बड़ा घोंसला इसकी संक्षिप्तता के सभी लाभों को जल्दी से समाप्त कर सकता है। किसी भी मामले में, एसएएसएस और एससीएसएस के बीच अंतर मौलिक नहीं है। लेस एससीएसएस की तुलना में एसएएसएस के करीब है। और, सामान्य तौर पर, यह वही है। कई अंतर नहीं हैं, लेकिन उनमें से एक जोड़े ने मौलिक रूप से शक्ति के संतुलन को बदल दिया है।

1. कम - जेएस का उपयोग करके क्लाइंट-साइड कर सकते हैं।

अधिक सटीक रूप से, ऐसा नहीं है कि यह कर सकता है, इसे इसके लिए डिज़ाइन किया गया है। कम कोड का उपयोग कर सामान्य अभ्यास:

 <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> 

इसे बाद में सर्वर पर संकलित करने की क्षमता (दोनों जेएस और रूबी पर) के लिए खराब कर दिया गया था।

पहली नज़र में, कुछ अजीब संपत्ति। क्‍लाइंट की ओर क्‍यों संकलित करें, यदि आप सर्वर पर पूरी तरह से संकलित कर सकते हैं और रेडी-मेड सिकुड़े हुए सीएसएस को रेंडर कर सकते हैं जैसा कि हमें SASS के साथ किया जाता है?

LESS डॉक्यूमेंटेशन की सबसे साधारण-सी दिखने वाली लाइनों का अध्ययन करने के बाद यह कारण दिखाई देता है:

@height: `document.body.clientHeight`;

यहां ऐसी छोटी अकेली रेखा है जो अवसर देती है कि कोडर ने केवल शैलियों के विकास की शुरुआत के बाद से ही सपना देखा है। CSS से क्लाइंट-साइड जावा स्क्रिप्ट को कॉल करना और स्टाइल बनाते समय वास्तविक ब्राउज़र सेटिंग्स को ध्यान में रखना।

यही है, हमारे पास पहले डोम को लोड करने का अवसर है, और फिर क्लाइंट साइड पर सीधे इसके लिए विशेष सीएसएस बनाएं। इसके बाद, अपने लिए सोचें कि यह किस अवसर को खोलता है।

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

2. LASS, SASS / SCSS के विपरीत, कोई तर्क नहीं है।

LESS में कोई / नहीं है, तो, आदि के लिए। हालांकि, इस तथ्य को देखते हुए कि जेएस आसानी से इसमें अंतर्निहित है, मुझे लगता है कि तर्क को जकड़ना संभव है। मैंने इसे आजमाया नहीं है।

3. कम में, वर्गों को मिलाना + बनाना ज्यादा आसान है।

मुझे वास्तव में यह पसंद आया कि LESS में आप परिभाषा में अन्य वर्गों के गुणों को शामिल कर सकते हैं। वर्ग स्वयं एक मिश्रण है। यह एक और विशेषता है जो SASS / SCSS में नहीं मिलती है। आप LESS में नियमित CSS फ़ाइल शामिल कर सकते हैं और अपनी संपत्तियों को परिभाषित करने के लिए इसकी कक्षाओं का उपयोग कर सकते हैं। उदाहरण के लिए:

.wrap {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre { .wrap }


सारांश

पहले पैराग्राफ के अपवाद के साथ, अंतर महान नहीं है और पसंद एक शौकिया के लिए महान है।

मेरे लिए व्यक्तिगत रूप से, LESS अपनी सादगी के कारण अधिक आकर्षक दिखता है। मुझे शैलियों में कभी भी साइकिल और शर्तों की आवश्यकता नहीं है। लेस में 'बॉक्स-शैडो, लीनियर-ग्रेडिएंट, डार्कन' जैसी क्लासिक उपयोगिताओं हैं।

हां, SASS ( कम्पास , बूर्बोन और काफी व्यापक समुदाय) के तहत पहले से तैयार कई पुस्तकालय हैं, लेकिन LESS के तहत एक ही ट्विटर बूटस्ट्रैप है और यह पर्याप्त से अधिक है।

PS मुझे तुलना पृष्ठ SASS बनाम LESS मिला और इसके साथ मैंने तर्कयुक्त तुलना wrangl.com की एक जिज्ञासु सेवा की खोज की