आम्ही SCSS च्या बाजूने कमी सोडून देण्याचा निर्णय का घेतला: CSS प्रीप्रोसेसरची तुलना. Sass आणि SCSS मधील महत्त्वाचे फरक

मला SASS वाक्यरचना त्याच्या संक्षिप्ततेसाठी SCSS पेक्षा जास्त आवडते. परंतु SASS मधील शैलींचे प्रचंड घरटे त्याच्या संक्षिप्ततेचे फायदे त्वरीत दूर करू शकतात. कोणत्याही परिस्थितीत, SASS आणि SCSS मधील फरक मूलभूत नाही. SASS पेक्षा कमी SCSS जवळ असल्याचे दिसून आले. आणि, सर्वसाधारणपणे, ते समान आहे. बरेच फरक नाहीत, परंतु त्यापैकी काही मूलभूतपणे शक्ती संतुलन बदलतात.

1. कमी - JS वापरून क्लायंट-साइड करू शकतो.

अधिक तंतोतंत, तो करू शकतो असे नाही, त्याने यासाठी डिझाइन केले आहे. कमी कोड वापरण्यासाठी सामान्य सराव:

तेव्हाच सर्व्हरवर (जेएस आणि रुबी दोन्ही) संकलित करण्याची क्षमता त्यात जोडली गेली.

पहिल्या दृष्टीक्षेपात ती एक विचित्र मालमत्ता आहे असे दिसते. जर तुम्ही सर्व्हरवर उत्तम प्रकारे संकलित करू शकत असाल आणि तयार कॉम्प्रेस्ड CSS सर्व्ह करू शकत असाल तर क्लायंटच्या बाजूने कंपाईल का करावे?

कमी दस्तऐवजाच्या नॉनडिस्क्रिप्टच्या अगदी शेवटच्या ओळींचा अभ्यास केल्यावर कारण स्पष्ट होते:

@height: `document.body.clientHeight`;

अशी एक लहान एकाकी ओळ अशा संधी प्रदान करते ज्याचे लेआउट डिझाइनरांनी मास्टरिंग शैलीच्या सुरुवातीपासूनच स्वप्न पाहिले आहे. CSS वरून क्लायंट-साइड Java स्क्रिप्ट कॉल करणे आणि शैली तयार करताना वास्तविक ब्राउझर सेटिंग्ज विचारात घेणे.

म्हणजेच, आमच्याकडे आता प्रथम DOM लोड करण्याची आणि नंतर थेट क्लायंटच्या बाजूने विशेष CSS तयार करण्याची संधी आहे. मग स्वतःच विचार करा की या कोणत्या संधी उघडतात.

तुमच्या प्रकल्पाला याची गरज आहे का हा वेगळा प्रश्न आहे. हे स्पष्ट आहे की प्रत्येकजण क्लायंट अनिश्चितता/स्वातंत्र्य आणि "आम्ही ते सार्वत्रिकपणे करतो जेणेकरुन ते कमी-अधिक प्रमाणात प्रत्येकाला सर्व ठरावांवर दर्शविले जाईल" च्या शैलीमध्ये नित्याचे आहे. परंतु हे विसरण्याचे कारण नाही की आता अशी संधी अस्तित्वात आहे आणि त्यासह आपण करू शकता, उदाहरणार्थ, एक अतिशय लवचिक लेआउट.

2. कमी, SASS/SCSS च्या विपरीत, कोणतेही तर्क नाही.

जर/तर, साठी, इ. कमी मध्ये नाही. जरी, त्यात JS सहज अंगभूत आहे हे लक्षात घेता, मला वाटते की तर्कशास्त्रात स्क्रू करणे शक्य आहे. मी प्रयत्न केला नाही.

3. कमी मिक्स करणे सोपे आहे + तुम्ही वर्ग मिक्स करू शकता.

मला हे खरं आवडलं की कमीत कमी तुम्ही व्याख्येमध्ये इतर वर्गांचे गुणधर्म समाविष्ट करू शकता. वर्ग स्वतः एक मिक्सिन आहे. हे आणखी एक वैशिष्ट्य आहे जे SASS/SCSS मध्ये नाही. तुम्ही नियमित CSS फाइल कमी मध्ये समाविष्ट करू शकता आणि तुमचे गुणधर्म परिभाषित करण्यासाठी त्याचे वर्ग वापरू शकता. उदाहरणार्थ:

लपेटणे (
text-wrap: wrap;
व्हाईट-स्पेस: प्री-रॅप;
व्हाईट-स्पेस: -मोज-प्री-रॅप;
शब्द-ओघ: खंडित शब्द;
}
पूर्व ( .रॅप )

सारांश

1 ला बिंदू वगळता, फरक मोठा नाही आणि हौशीसाठी निवड जास्त आहे.

माझ्यासाठी वैयक्तिकरित्या, कमी त्याच्या साधेपणामुळे अधिक आकर्षक दिसते. मला याआधी स्टाईलमध्ये सायकल आणि कंडिशनची गरज नव्हती. "बॉक्स-शॅडो, लिनियर-ग्रेडियंट, गडद" सारख्या क्लासिक युटिलिटीज कमी उपलब्ध आहेत.

होय, अनेक रेडीमेड लायब्ररी आधीच SASS (

लेखकाकडून: सर्व प्रथम, प्रीप्रोसेसर म्हणजे काय? थोडक्यात, प्रीप्रोसेसर हा एक प्रोग्राम आहे जो दुसऱ्या प्रोग्रामच्या इनपुट आवश्यकतांनुसार डेटा सुधारतो. CSS प्रीप्रोसेसर ही एक स्क्रिप्टिंग भाषा आहे जी व्हेरिएबल्स, नेस्टिंग नियम, फंक्शन्स आणि लॉजिकल ब्लॉक्ससह नियमित CSS ची क्षमता वाढवते.

मी ते का वापरावे?

बऱ्याचदा तुम्ही स्वतःला अशा परिस्थितीत सापडाल जिथे तुम्हाला वेगवेगळ्या ठिकाणी विशिष्ट मालमत्तेसाठी समान मूल्य वापरावे लागेल. उदाहरणार्थ, तुम्ही प्रथम साइटचा प्राथमिक रंग म्हणून लाल निर्दिष्ट केला आहे. मग आपल्याला ते हिरव्यामध्ये बदलण्याची आवश्यकता आहे.

व्हेरिएबल्ससह, तुम्हाला शैलीतील लाल रंगाचा प्रत्येक उल्लेख शोधण्याची आणि बदलण्याची गरज नाही. तुम्ही व्हेरिएबलचे मूल्य एकदा परिभाषित करा, उदाहरणार्थ "प्राथमिक रंग", आणि नंतर ते व्हेरिएबल मूल्य म्हणून वापरा.

प्राथमिक रंग मूल्य एकाच ठिकाणी बदलते. नेटवर्क विनंत्यांच्या संख्येची चिंता न करता तुम्ही इतर स्त्रोतांकडून CSS फाइल्स देखील इंपोर्ट करू शकता, कारण त्या सर्व संकलित करण्यापूर्वी एका फाइलमध्ये एकत्र केल्या जाऊ शकतात.

CSS प्रीप्रोसेसरच्या नेस्टेड स्वरूपाबद्दल धन्यवाद, तुम्हाला त्याच परिणामासह कॉम्पॅक्ट कोड मिळेल. LESS आणि SCSS DRY तत्त्वावर आधारित आहेत, ज्याचा अर्थ आहे “स्वतःची पुनरावृत्ती करू नका” किंवा “स्वतःची पुनरावृत्ती करू नका.”

प्रीप्रोसेसर. जलद सुरुवात

कमी मध्ये काय चूक आहे?

नेटवर्क आधीपासून कोणते चांगले आहे याबद्दल चर्चांनी भरलेले आहे: कमी किंवा SCSS. म्हणून, मी दोन्ही विषयांचा तपशीलवार समावेश करणार नाही. त्याऐवजी, मी कमी असलेल्या समस्यांबद्दल बोलेन.

SCSS व्हेरिएबल्स परिभाषित करण्यासाठी $ चिन्ह वापरते, तर कमी @ चिन्ह वापरते. मीडिया क्वेरी, इंपोर्ट आणि कीफ्रेम ॲनिमेशनसाठी CSS देखील @ चिन्ह वापरत असल्याने, हे विकसकांसाठी गोंधळात टाकणारे असू शकते.

CSS मध्ये $ चिन्ह वापरले जात नाही. @ चिन्ह SCSS मध्ये उपस्थित आहे, परंतु ते @if , @else , @each , @for आणि @while निर्देशांसाठी वापरले जाते.

ही परिस्थिती प्रत्येकासाठी वास्तववादी नसली तरी घटक वेगळे करण्यासाठी भिन्न आयडी वापरणे चांगले.

SCSS पारंपारिक बुलियन अभिव्यक्ती जसे की if/else, blocks आणि loops चे समर्थन करते. गार्डेड मिक्सिन्स कमी प्रमाणात डोळ्यावर सोपी असतात, पण समजणे कठीण असते.

कमी वापरून करता येते...

...किंवा फक्त SCSS वापरून.

LESS फक्त एक संरक्षित मिक्सिन परिभाषित करते. म्हणून, तुम्ही फक्त दुसरा युक्तिवाद पास करू शकत नाही आणि सर्व संभाव्य परिस्थितींसाठी कोड डुप्लिकेट करून त्याच मिक्सिनमध्ये प्रक्रिया करू शकत नाही. खरं तर, LESS (कमी) जास्त आहे (श्लेष हेतू).

मला माहित आहे की या केससाठी गुणधर्मांची नावे म्हणून संवर्धित मूल्ये वापरून कोड लहान करणे शक्य आहे, परंतु समस्या अशी आहे की मी समान मिश्रणाचे दोन भिन्न भाग सशर्तपणे कमी करू शकत नाही.

या कोडमध्ये आणखी डोकेदुखी आहेत...

प्रीप्रोसेसर. जलद सुरुवात

Less and Sass प्रीप्रोसेसर वापरण्याच्या मूलभूत गोष्टी 2 आठवड्यांपेक्षा कमी वेळेत जाणून घ्या

...याच्या पेक्षा.

LESS सह समान परिणाम प्राप्त करण्यासाठी, मला सर्व काही पूर्वनिर्धारित करावे लागेल, एक मिक्सिन लिहावे लागेल, अनुक्रमणिका स्थान मिळवावे लागेल, अनुक्रमणिका मूल्य शून्य होईपर्यंत माझ्या तर्कानुसार पुनरावृत्ती करावी लागेल आणि मिक्सिनला व्यक्तिचलितपणे कॉल करावे लागेल.

हे माझे वैयक्तिक मत असले तरी, मला वाटते की SCSS साधारणपणे गणना मूल्ये आणि गणितीय मूल्ये अधिक चांगल्या प्रकारे हाताळते.

त्यात चूक काय?

कमी, दुसरीकडे, अधिक जटिल आहे. उदाहरणार्थ, जेव्हा मी ते वापरतो, तेव्हा मी गणना करण्याचा प्रयत्न करत नाही. पण मी केले असले तरी, 100% वजा 50px बरोबर 50% कधीपासून?

कमी, तुम्ही बदल युनिट्ससह मूल्यांकडे का दुर्लक्ष करत आहात?

मला आधीच CSS माहित असताना तुम्ही मला तुझी कुबड्या शिकायला का लावत आहात?

आणि एक शेवटची गोष्ट. LibSass प्रकल्पाबद्दल धन्यवाद, SCSS मध्ये C, Go, PHP, Python, Dart इत्यादी इतर भाषांसाठी अनेक रॅपर्स आहेत.

आम्ही SCSS च्या बाजूने कमी सोडण्याचा निर्णय का घेतला?

आम्ही जॉटफॉर्म कार्ड्स विकसित करत असताना, आम्हाला व्हेरिएबल व्हॅल्यूजची पूर्व-प्रक्रिया करणे आवश्यक होते - प्री-कंपाइलिंग आणि सर्व्हर-साइड कॅशिंग एकाच वेळी; आणि हे सर्व उत्तम प्रकारे केले पाहिजे.

वापरकर्त्यांनी फॉर्मचे स्वरूप सानुकूलित करण्यास सक्षम असावे अशी आमची इच्छा आहे. जेणेकरून कोणतेही बदल त्वरित आणि एकाच वेळी सर्व्हरवर प्रदर्शित आणि कॅश केले जातील. आमच्या वापरकर्त्यांच्या फायद्यासाठी, आम्हाला क्लायंट-साइड कमी शेल चालवायचे नव्हते कारण त्यासाठी क्लायंटची प्रक्रिया शक्ती आवश्यक असेल - आणि बऱ्याच गोष्टी चुकीच्या होऊ शकतात.

आम्ही LESS वरून SCSS वर जाण्याच्या ध्येयाने विकास चक्र सुरू केले नाही. पण या किरकोळ समस्यांना तोंड देण्याच्या अर्ध्या मार्गात, कमीसाठी योग्य रॅपर नसणे हा शेवटचा पेंढा होता.

तथापि, LESS आणि SCSS मधील फरक त्यांच्यात जे साम्य आहे त्यापेक्षा कमी महत्वाचे आहेत. शेवटी, तुम्ही कोणता प्रीप्रोसेसर वापरता याने काही फरक पडत नाही, जोपर्यंत तुम्ही ते वापरता.

एकल CSS फाईल आणि पारंपारिक CSS संरचनेसह एक मोठा प्रकल्प व्यवस्थापित करण्याचा प्रयत्न करणे दोन समस्यांसह प्रीप्रोसेसर वापरण्यापेक्षा खूप कठीण आहे.

मला SASS वाक्यरचना त्याच्या संक्षिप्ततेसाठी SCSS पेक्षा जास्त आवडते. परंतु SASS मधील शैलींचे प्रचंड घरटे त्याच्या संक्षिप्ततेचे फायदे त्वरीत दूर करू शकतात. कोणत्याही परिस्थितीत, SASS आणि SCSS मधील फरक मूलभूत नाही. SASS पेक्षा कमी SCSS जवळ असल्याचे दिसून आले. आणि, सर्वसाधारणपणे, ते समान आहे. बरेच फरक नाहीत, परंतु त्यापैकी काही मूलभूतपणे शक्ती संतुलन बदलतात.

1. कमी - JS वापरून क्लायंट-साइड करू शकतो.

अधिक तंतोतंत, तो करू शकतो असे नाही, त्याने यासाठी डिझाइन केले आहे. कमी कोड वापरण्यासाठी सामान्य सराव:

तेव्हाच सर्व्हरवर (जेएस आणि रुबी दोन्ही) संकलित करण्याची क्षमता त्यात जोडली गेली.

पहिल्या दृष्टीक्षेपात ती एक विचित्र मालमत्ता आहे असे दिसते. जर तुम्ही सर्व्हरवर उत्तम प्रकारे संकलित करू शकत असाल आणि तयार कॉम्प्रेस्ड CSS सर्व्ह करू शकत असाल तर क्लायंटच्या बाजूने कंपाईल का करावे?

कमी दस्तऐवजाच्या नॉनडिस्क्रिप्टच्या अगदी शेवटच्या ओळींचा अभ्यास केल्यावर कारण स्पष्ट होते:

@height: `document.body.clientHeight`;

अशी एक लहान एकाकी ओळ अशा संधी प्रदान करते ज्याचे लेआउट डिझाइनरांनी मास्टरिंग शैलीच्या सुरुवातीपासूनच स्वप्न पाहिले आहे. CSS वरून क्लायंट-साइड Java स्क्रिप्ट कॉल करणे आणि शैली तयार करताना वास्तविक ब्राउझर सेटिंग्ज विचारात घेणे.

म्हणजेच, आमच्याकडे आता प्रथम DOM लोड करण्याची आणि नंतर थेट क्लायंटच्या बाजूने विशेष CSS तयार करण्याची संधी आहे. मग स्वतःच विचार करा की या कोणत्या संधी उघडतात.

तुमच्या प्रकल्पाला याची गरज आहे का हा वेगळा प्रश्न आहे. हे स्पष्ट आहे की प्रत्येकजण क्लायंट अनिश्चितता/स्वातंत्र्य आणि "आम्ही ते सार्वत्रिकपणे करतो जेणेकरुन ते कमी-अधिक प्रमाणात प्रत्येकाला सर्व ठरावांवर दर्शविले जाईल" च्या शैलीमध्ये नित्याचे आहे. परंतु हे विसरण्याचे कारण नाही की आता अशी संधी अस्तित्वात आहे आणि त्यासह आपण करू शकता, उदाहरणार्थ, एक अतिशय लवचिक लेआउट.

2. कमी, SASS/SCSS च्या विपरीत, कोणतेही तर्क नाही.

जर/तर, साठी, इ. कमी मध्ये नाही. जरी, त्यात JS सहज अंगभूत आहे हे लक्षात घेता, मला वाटते की तर्कशास्त्रात स्क्रू करणे शक्य आहे. मी प्रयत्न केला नाही.

3. कमी मिक्स करणे सोपे आहे + तुम्ही वर्ग मिक्स करू शकता.

मला हे खरं आवडलं की कमीत कमी तुम्ही व्याख्येमध्ये इतर वर्गांचे गुणधर्म समाविष्ट करू शकता. वर्ग स्वतः एक मिक्सिन आहे. हे आणखी एक वैशिष्ट्य आहे जे SASS/SCSS मध्ये नाही. तुम्ही नियमित CSS फाइल कमी मध्ये समाविष्ट करू शकता आणि तुमचे गुणधर्म परिभाषित करण्यासाठी त्याचे वर्ग वापरू शकता. उदाहरणार्थ:

लपेटणे (
text-wrap: wrap;
व्हाईट-स्पेस: प्री-रॅप;
व्हाईट-स्पेस: -मोज-प्री-रॅप;
शब्द-ओघ: खंडित शब्द;
}
पूर्व ( .रॅप )

सारांश

1 ला बिंदू वगळता, फरक मोठा नाही आणि हौशीसाठी निवड जास्त आहे.

माझ्यासाठी वैयक्तिकरित्या, कमी त्याच्या साधेपणामुळे अधिक आकर्षक दिसते. मला याआधी स्टाईलमध्ये सायकल आणि कंडिशनची गरज नव्हती. "बॉक्स-शॅडो, लिनियर-ग्रेडियंट, गडद" सारख्या क्लासिक युटिलिटीज कमी उपलब्ध आहेत.

होय, अनेक रेडीमेड लायब्ररी आधीच SASS (

• भाषांतर

"सीएसएससाठी मी कोणती प्रीप्रोसेसर भाषा वापरावी?" अलीकडे एक अतिशय गंभीर समस्या आहे. मला हे काही वेळा वैयक्तिकरित्या विचारले गेले आहे आणि असे दिसते की प्रत्येक दोन दिवसांनी प्रश्न ऑनलाइन येतो. संभाषण प्रीप्रोसेसिंगच्या साधक आणि बाधक विषयावरून कोणती भाषा सर्वोत्कृष्ट आहे याच्या चर्चेपर्यंत गेली हे खूप छान आहे. कामाला लागा!

थोडक्यात: SASS.

थोडं लांबलचक उत्तर: SASS हे सर्व बाबतीत चांगले आहे, परंतु जर तुम्ही आधीच कमी आनंदी असाल, तर ते छान आहे, किमान तुम्ही प्रीप्रोसेसिंग वापरून तुमचे जीवन आधीच सोपे केले आहे.

रुबी आणि कमांड लाइनसह प्रशिक्षण वेळापत्रक फक्त वाक्यरचना आहे. तुम्ही तयार केलेल्या फाइल्स संकलित करण्यासाठी, तुम्ही CodeKit सारखे अनुप्रयोग वापरावे. तुम्हाला रुबी किंवा कमांड लाइन किंवा काहीही ची मूलभूत माहिती असणे आवश्यक आहे. तुम्हाला कदाचित हे माहित असले पाहिजे, परंतु तुम्हाला याची गरज नाही, त्यामुळे काही फरक पडत नाही.

विजेता: काहीही नाही.

बचावासाठी CSS3 कोणत्याही भाषेसह, उपसर्गांसह जीवन सोपे करण्यासाठी तुम्ही तुमचे स्वतःचे मिश्रण तयार करू शकता. त्यामुळे येथे कोणीही विजेता नाही. पण तुमच्या प्रकल्पांमध्ये हे उपसर्ग अपडेट करणे कसे टाळायचे हे तुम्हाला माहीत आहे का? (नाही, तुम्हाला माहीत नाही). तसेच, बहुधा तुम्हाला तुमची स्वतःची मिक्सन्स फाइल अपडेट करावी लागणार नाही. SASS तुम्हाला कंपास वापरण्याची परवानगी देते, ज्याचे स्वयं-अपडेट उपसर्ग समस्या भूतकाळातील गोष्ट बनवतात. अर्थात, तुम्ही सॉफ्टवेअर अपडेट करू शकता आणि वेळोवेळी ते संकलित करू शकता, परंतु हे एक क्षुल्लक काम आहे आणि तुम्ही त्यावर थांबू नये.

तर हे सर्व काय उकळते ते म्हणजे: SASS मध्ये कंपास आहे आणि कमी नाही. खरं तर, सर्वकाही थोडे अधिक क्लिष्ट आहे. कंपास फॉर LESS सारखा प्रकल्प तयार करण्याचे सर्व प्रयत्न अयशस्वी झाले आहेत. मुद्दा असा आहे की हे योग्यरित्या करण्यासाठी LESS ही पुरेशी मजबूत भाषा नाही. खाली थोडे अधिक तपशील.

विजेता: SASS

भाषा वैशिष्ट्ये: लॉजिक/लूप्स कमी तुम्हाला "सुरक्षित मिश्रण" तयार करण्यास अनुमती देते. जर स्थिती सत्य असेल तरच हे मिश्रण प्रभावी होतील. समजा तुम्हाला पार्श्वभूमीचा रंग बदलायचा आहे, जो वर्तमान मजकूर रंगावर अवलंबून असेल. जर मजकुराचा रंग "पुरेसा हलका" असेल तर तुम्हाला कदाचित पार्श्वभूमी गडद करायची असेल. जर ते "पुरेसे गडद" असेल तर तुम्हाला हलकी पार्श्वभूमी हवी आहे. अशा प्रकारे तुम्ही या "गार्ड्स" सह मिक्सिनचे दोन भागांमध्ये विभाजन कराल जे सुनिश्चित करतात की त्यापैकी फक्त एकच कार्यान्वित होईल.

कमी
.set-bg-color (@text-color) जेव्हा (lightness(@text-color) >= 50%) (पार्श्वभूमी: काळा; ) .set-bg-color (@text-color) तेव्हा (लाइटनेस(@text-color) -रंग)< 50%) { background: #ccc; }
वापरल्यानंतर तुम्हाला एक योग्य पार्श्वभूमी मिळेल:

कमी
.box-1 ( रंग: #BADA55; .set-bg-color(#BADA55); )
हे अगदी सोपे आहे, परंतु सार, मला आशा आहे, स्पष्ट आहे. तुम्ही यापेक्षा खूप छान गोष्टी करू शकता. कमी स्वयं-संदर्भ पुनरावृत्तींना देखील अनुमती देते ज्यांचे मिश्रण स्वतःला अद्यतनित मूल्यांसह कॉल करू शकतात.

कमी
.loop (@index) जेव्हा (@index > 0) ( .myclass ( z-index: @index; ) // स्वतःला कॉल करा .loopingClass(@index - 1); ) // स्टॉप लूप .loopingClass (0) () // आउटपुट सामग्री .loopingClass (10);

लॉजिक/लूपचा शेवट इथेच होतो. SASS मध्ये अद्ययावत तार्किक आणि चक्रीय ऑपरेटर आहेत. if/then/else, लूपसाठी, while loop आणि प्रत्येक लूप. कोणत्याही युक्त्या नाहीत, वास्तविक प्रोग्रामिंग. SASS ही बऱ्यापैकी मजबूत भाषा आहे, जी कंपास वापरणे शक्य करते.

उदाहरणार्थ, कंपासमध्ये पार्श्वभूमी मिक्सिन आहे जे इतके शक्तिशाली आहे की आपण त्यात जे काही हवे ते टाकू शकता आणि आपल्याला पाहिजे ते पूर्ण करू शकता. चित्रे, ग्रेडियंट आणि त्यांचे कोणतेही संयोजन, स्वल्पविरामाने विभक्त केलेले - आणि तुम्हाला इच्छित परिणाम मिळेल (उपसर्ग आणि इतर सर्व गोष्टींसह).

कोडचा एक संक्षिप्त तुकडा:

SCSS
.bam ( @include background(image-url("foo.png"), रेखीय-ग्रेडियंट(वर डावीकडे, #333, #0c0), रेडियल-ग्रेडियंट(#c00, #fff 100px));)
हा कोड खालील मॉन्स्टरमध्ये बदलतो (जे, दुर्दैवाने, क्रॉस-ब्राउझर सुसंगततेसाठी आवश्यक आहे):

CSS
.bam (पार्श्वभूमी: url("/foo.png"), -वेबकिट-ग्रेडियंट(रेखीय, 0% 0%, 100% 100%, रंग-स्टॉप(0%, #333333), रंग-स्टॉप(100%, #00cc00)), -वेबकिट-ग्रेडियंट(रेडियल, 50% 50%, 0, 50% 50%, 100, कलर-स्टॉप(0%, #cc0000), कलर-स्टॉप(100%, #ffffff)); url("/foo.png"), -webkit-linear-gradient(शीर्ष डावीकडे, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px पार्श्वभूमी: url("/foo); . png"), -moz-linear-gradient(वर डावीकडे, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px); पार्श्वभूमी: url("/foo.png"), - o -रेखीय-ग्रेडियंट(शीर्ष डावीकडे, #333333, #00cc00), -o-रेडियल-ग्रेडियंट(#cc0000, #ffffff 100px); पार्श्वभूमी: url("/foo.png"), -ms-रेखीय-ग्रेडियंट (शीर्ष left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px); पार्श्वभूमी: url("/foo.png"), रेखीय-ग्रेडियंट (शीर्ष डावीकडे, #333333, #00cc00) , रेडियल-ग्रेडियंट (#cc0000, #ffffff 100px )
विजेता: SASS

विजेता: कमी

@extend संकल्पना समजा तुम्ही विशिष्ट शैलींचा वर्ग तयार केला आहे. मग आपल्याला आणखी एक तयार करणे आवश्यक आहे, जे मागील एकसारखे असेल, परंतु काही जोडण्यांसह. कमी तुम्हाला हे असे करण्यास अनुमती देते:

कमी
.module-b ( .module-a(); /* .module-a वरून येथे सर्व काही कॉपी करते */ सीमा: 1px घन लाल; )
थोडक्यात, हे एक सामान्य "समाविष्ट" आहे. तुम्ही हे इन्सर्शन SASS मध्ये देखील वापरू शकता, परंतु @extend वापरून ते करणे अधिक चांगले आहे. @extend फक्त .module-a वरून .module-b मध्ये शैली कॉपी करत नाही (ज्यामुळे फाइल ब्लोट होते), ते संकलित मधील .module-a सिलेक्टरचे नाव .module-a, .module-b असे बदलते. CSS (जे अधिक कार्यक्षम मार्ग आहे).

SCSS
.module-a ( /* सामग्रीचा एक समूह */ ) .module-b ( /* काही अद्वितीय शैली */ @extend .module-a; )
यावर संकलित करते:

CSS
.module-a, .module-b ( /* सामग्रीचा एक समूह */ ) .module-b ( /* काही अद्वितीय शैली */ )
तुम्हाला हे दिसत आहे का? SASS निवडकर्त्यांना ओव्हरराइड करते, जो अधिक कार्यक्षम मार्ग आहे.

विजेता: SASS

व्हेरिएबल हाताळणी @ कमी वापरते, SASS $ वापरते. डॉलर चिन्ह CSS मध्ये वापरले जात नाही, परंतु @ नाही. हे @keyframes किंवा @media ब्लॉक घोषित करण्यासाठी वापरले जाते. तुम्हाला असे वाटेल की एक किंवा दुसरे विशेष वर्ण वापरणे ही चवची बाब आहे, परंतु मला वाटते की येथे SASS चा एक फायदा आहे कारण ते मूलभूत संकल्पना गोंधळात टाकत नाही.

SASS मध्ये एक विचित्र गुणधर्म आहे - जर तुम्ही "ग्लोबल" व्हेरिएबलला "स्थानिक" ने ओव्हरराइड केले, तर ग्लोबल व्हेरिएबल त्याचे मूल्य घेईल. जरा विचित्र.

SCSS
$रंग:काळा; .scoped ( $color: पांढरा; रंग: $color; ) .unscoped ( // LESS = काळा (जागतिक) // SASS = पांढरा (स्थानिक द्वारे अधिलिखित) रंग: $color; )
ही युक्ती उपयुक्त ठरू शकते, परंतु ती अजिबात अंतर्ज्ञानी नाही, विशेषतः जर तुम्ही Javascript मध्ये लिहित असाल.

विजेता: तुम्हाला एक नाणे फेकावे लागेल :)

मीडिया नियमांसह कार्य करणे आपल्यापैकी जवळजवळ प्रत्येकजण, @media नियमांसह कार्य करण्यास प्रारंभ करताना, मुख्य शैली पृष्ठाच्या तळाशी त्यांच्यासह ब्लॉक्स जोडतो. हे कार्य करते, परंतु स्टाईल डिकपलिंगकडे जाते, जसे की:

CSS
.some-वर्ग ( /* डीफॉल्ट शैली */ ) /* CSS च्या शेकडो ओळी */ @media (कमाल-रुंदी: 800px) ( .some-वर्ग ( /* प्रतिसाद शैली */ ) )
SASS किंवा कमी सह तुम्ही नेस्टिंग वापरून या शैली एकत्र करू शकता.

SCSS
.some-वर्ग ( /* डीफॉल्ट शैली */ @media (कमाल-रुंदी: 800px) ( /* प्रतिसाद शैली */ ) )
"प्रतिसाद द्या" हे एक छान SASS तंत्र आहे (ख्रिस एपस्टाईन, बेन श्वार्झ आणि जेफ क्रॉफ्ट मधील कोड पहा).

SCSS
=respond-to($name) @if $name == लहान-स्क्रीन @media फक्त स्क्रीन आणि (किमान-रुंदी: 320px) @content @if $name == मोठ्या-स्क्रीन @media फक्त स्क्रीन आणि (किमान-रुंदी: 800px) @content
मग आपण ते अतिशय संक्षिप्तपणे वापरू शकता:

SCSS
.स्तंभ रुंदी: 25% +प्रतिसाद-टू(स्मॉल-स्क्रीन) रुंदी: 100%
टीप: हे तंत्र वापरण्यासाठी तुम्हाला SASS 3.2 ची आवश्यकता असेल, जे सध्या अल्फामध्ये आहे, तुम्ही ते gem install sass --pre सह स्थापित करू शकता. मला वाटते की विकासात ही खरोखर उपयुक्त गोष्ट आहे यात शंका नसावी.

विजेता: SASS

गणित मूलतः, दोन्ही भाषांचा गणिताचा भाग बराचसा सारखा आहे, परंतु मोजमापाच्या एककांच्या हाताळणीत अजूनही काही विचित्रता आहेत.
उदाहरणार्थ, LESS पहिल्या व्हेरिएबलचे मूल्य त्याचे युनिट म्हणून घेईल, इतर सर्वांकडे दुर्लक्ष करून.

कमी
div (रुंदी: 100px + 2em; // == 102px (विचित्र) )
SASS तुम्हाला स्पष्टपणे आणि स्पष्टपणे कळवेल की येथे एक त्रुटी लपलेली आहे:
विसंगत युनिट्स: "em" आणि "px" . अर्थात, हा एक विवादास्पद मुद्दा आहे जो अधिक चांगला आहे - एक त्रुटी किंवा चुकीचे मूल्य, परंतु वैयक्तिकरित्या मी पूर्वीसाठी आहे. विशेषत: जर तुम्ही संख्या वापरण्याऐवजी व्हेरिएबल्सला पसंती देत ​​असाल तर, यामुळे त्यांचा मागोवा घेणे खूप कठीण होते.

SASS तुम्हाला मोजमापाच्या "अज्ञात" युनिट्सवर गणितीय ऑपरेशन्स करण्यास अनुमती देते, जे पुढील अद्यतनापूर्वी दिसू शकतात. कमी याला परवानगी देत ​​नाही. आणखी विचित्र फरक आहेत, जसे की SASS संख्यांना एककांसह कसे गुणाकार करते, परंतु हा आजचा विषय नाही.

विजेता: SASS (ताणून)

"आणि एक पूर्णपणे तार्किक प्रश्न उद्भवला: "SASS आणि SCSS मध्ये काय फरक आहे?" विषय मनोरंजक आहे, चला तो शोधूया.

जेव्हा आपण Sass बद्दल बोलतो तेव्हा आमचा अर्थ प्रीप्रोसेसर आणि संपूर्ण भाषा असा होतो.

तथापि, Sass (प्रीप्रोसेसर) वापरून आम्ही दोन भिन्न वाक्यरचना वापरू शकतो:

• सास (इंडेंटेशन);
• SCSS (CSS-सारखी वाक्यरचना).

थोडा इतिहास

सास हा मूळतः दुसऱ्या प्रीप्रोसेसर, हॅमलचा भाग होता, ज्याचा शोध रुबी डेव्हलपर्सनी लिहिला होता.

त्यामुळे Sass शैलींनी रुबी सारखी वाक्यरचना वापरली, कंस नाही, अर्धविराम नाही आणि कठोर इंडेंटेशन नाही, याप्रमाणे:

// व्हेरिएबल!primary -color= hotpink // Primary =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius .my-element color= !प्राथमिक -रंग रुंदी= 100% ओव्हरफ्लो= लपवलेले .माय-अन्य-घटक +सीमा-त्रिज्या(5 px)

CSS सिंटॅक्सच्या तुलनेत लक्षणीय फरक आहे.

व्हेरिएबल द्वारे निर्दिष्ट केले आहे! , $ नाही , मूल्य असाइनमेंट चिन्ह = , नाही :.

परंतु मे 2010 मध्ये रिलीझ झालेल्या आवृत्ती 3.0 पर्यंत Sass असेच दिसत होते, ज्याने SCSS किंवा Sassy CSS नावाचा संपूर्णपणे नवीन वाक्यरचना सादर केली.

Sass वाक्यरचना CSS च्या जवळ आणणे, CSS शी अधिक सुसंगत बनवणे हे त्याचे ध्येय होते:

// व्हेरिएबल $primary -color: hotpink; // Mixin @mixin बॉर्डर-त्रिज्या($radius ) ( -webkit-border-radius: $radius ; -moz-border-radius: $radius ; सीमा-त्रिज्या: $radius ; ) .my-element ( रंग: $primary -रंग: 100%;

SCSS निश्चितपणे Sass पेक्षा CSS च्या जवळ आहे. Sass विकासकांनी दोन्ही वाक्यरचना बदलून एकमेकांच्या जवळ जाण्यासाठी कठोर परिश्रम केले! (चर चिन्ह) आणि = (असाइनमेंट चिन्ह) $ आणि: CSS वरून.

त्यामुळे नवीन प्रोजेक्ट सुरू करताना कोणता सिंटॅक्स वापरायचा असा प्रश्न तुम्हाला पडत असेल. मला निर्णय घेण्यास मदत करू द्या.

सास इंडेंटेड सिंटॅक्सचे फायदे

जरी हा वाक्यरचना तुम्हाला थोडा विचित्र वाटत असला तरी त्यात काही मनोरंजक मुद्दे आहेत. सर्व प्रथम, ते लहान आणि टाइप करणे सोपे आहे. कोणतेही कंस किंवा अर्धविराम नाहीत, त्यांची गरज नाही.

जेव्हा साधे चिन्ह: = आणि + पुरेसे असेल तेव्हा त्याला @mixin किंवा @include ची आवश्यकता नाही.

इंडेंटेशनच्या वापरामुळे सॅसमध्ये स्वच्छ कोडिंग मानके देखील आहेत. चुकीच्या इंडेंटेशनमुळे संपूर्ण .sass स्टाइलशीट खंडित होऊ शकते, येथे पहिली पायरी म्हणजे कोड स्वच्छ आणि योग्यरित्या फॉरमॅट केला आहे याची खात्री करणे.

Sass कोड लिहिण्याचा एकच मार्ग आहे: तो बरोबर लिहा.

Sass मध्ये इंडेंटेशनचे बुलियन मूल्य आहे हे विसरू नका. जेव्हा निवडक ब्लॉक इंडेंटेशन लागू केले जाते, तेव्हा याचा अर्थ ते नेस्टेड निवडक आहे.

उदाहरणार्थ:

.element-a रंग: hotpink .element-b float: left ... खालील CSS कोड आउटपुट करतो: .element-a ( रंग : हॉटपिंक ; ) .element-a .element-b ( float : left ; )

.element-b एका लेव्हलला उजवीकडे हलवण्याच्या साध्या तथ्याचा अर्थ असा आहे की ते .element-a चे मूल आहे, परिणामी CSS कोड बदलतो. म्हणून, इंडेंटेशनसह सावधगिरी बाळगा!

मला विश्वास आहे की इंडेंटेशन-आधारित सिंटॅक्स PHP/Java प्रोग्रामरच्या टीमपेक्षा मुख्यतः रुबी/पायथनसह काम करणाऱ्या टीमला अधिक अपील करेल (परंतु हे निश्चित नाही).

SCSS वाक्यरचनाचे फायदे

प्रथम, ते पूर्णपणे CSS सुसंगत आहे. याचा अर्थ असा की तुम्ही CSS फाईलचे नाव .scss असे बदलू शकता आणि ते असे कार्य करेल जणू काही झालेच नाही.

SCSS ला CSS सह पूर्णपणे सुसंगत बनवणे हे SCSS च्या प्रकाशनापासून Sass समर्थनासाठी नेहमीच प्राधान्य दिले गेले आहे आणि माझ्या मते हा एक मजबूत मुद्दा आहे.

भविष्यात काय वैध CSS सिंटॅक्स बनू शकते यावर लक्ष ठेवण्याचा आणि त्याची अंमलबजावणी करण्याचाही ते प्रयत्न करतात (म्हणून @directives ).

SCSS हे CSS शी सुसंगत असल्याने, त्याला अक्षरशः कोणत्याही अतिरिक्त प्रशिक्षणाची आवश्यकता नाही. वाक्यरचना अगदी सारखीच आहे: शेवटी, हे काही अतिरिक्तांसह फक्त CSS आहे.

नवीन डेव्हलपरसाठी हे महत्त्वाचे आहे जेणेकरून ते Sass बद्दल जास्त माहिती न घेता कोडिंग सुरू करू शकतात.

विशिष्ट रचना आधीपासूनच अर्थपूर्ण असल्याने ते अधिक वाचनीय आहे. जेव्हा तुम्ही @mixin पाहता, तेव्हा तुम्हाला माहिती असते की ही एक मिक्सिन घोषणा आहे; जेव्हा तुम्ही @include पाहता, तेव्हा तुम्हाला कळेल की हा एक मिक्सिन कॉल आहे.

कोणत्याही स्ट्रिंग संलग्न नाहीत आणि प्रत्येक गोष्टीचा अर्थ लावल्याशिवाय अर्थ प्राप्त होतो.

तसेच, Sass साठी जवळजवळ सर्व विद्यमान साधने, प्लगइन आणि डेमो SCSS वाक्यरचना वापरून विकसित केले आहेत. हे वाक्यरचना व्यावसायिकांच्या दिशेने अधिकाधिक केंद्रित होत आहे आणि त्यांच्याद्वारे डीफॉल्टनुसार निवडले जाते (जर ते एकमेव शक्य नसेल तर).

मुख्यतः वर नमूद केलेल्या कारणांमुळे. उदाहरणार्थ, शुद्ध सास इंडेंटेड सिंटॅक्ससाठी हायलाइटिंग शोधणे अधिक कठीण होत आहे; साधारणपणे फक्त SCSS बॅकलाइटिंग पर्याय उपलब्ध असतात.

निष्कर्ष

तरीही निवड तुमची आहे, परंतु जोपर्यंत तुमच्याकडे इंडेंटेड वाक्यरचना वापरण्याचे खरोखर आकर्षक कारण नसेल, मी Sass वर SCSS वापरण्याची जोरदार शिफारस करतो. हे केवळ सोपे नाही तर अधिक सोयीस्कर देखील आहे. जर तुम्ही पूर्ण नवशिक्या असाल, तर तुम्हाला SCSS आवश्यक आहे. CSS ची समानता तुम्हाला प्रीप्रोसेसर वापरून लेआउट शिकण्यापासून घाबरणार नाही. परंतु नंतर तुम्ही तुमच्या प्रकल्पांमध्ये Sass वापरण्याचा विचार करू शकता. मुख्य गोष्ट म्हणजे आपल्या कामात नवीन तंत्रज्ञान वापरण्यास घाबरू नका!

P.S. कृपया लक्षात घ्या की Sass ला कधीही सर्व-कॅप्स संक्षेपाने संदर्भित केले जात नाही, मग ती वाक्यरचना असो किंवा प्रोग्रामिंग भाषा. SCSS नेहमी कॅपिटल अक्षरांमध्ये सूचित केले जाते.