सैस क्या है? इस CSS एक्सटेंशन भाषा का उपयोग करना सीखें

वाक्यात्मक रूप से भयानक स्टाइल शीट (Sass) एक लोकप्रिय CSS एक्सटेंशन भाषा है। भाषा लगभग 15 वर्षों से अस्तित्व में है। यह CSS के हर संस्करण के साथ अच्छी तरह से काम करता है, इसे बूटस्ट्रैप से लेकर फाउंडेशन तक हर CSS लाइब्रेरी और फ्रेमवर्क के साथ संगत बनाता है।

भाषा आपको Sass कोड लिखने और फिर उस कोड को CSS में संकलित करने की अनुमति देती है। सादे CSS के बजाय Sass का उपयोग करने का मूल्य यह है कि यह अतिरिक्त सुविधाएँ प्रदान करता है जो वर्तमान में CSS के दायरे से बाहर हैं।

इस ट्यूटोरियल में, आप सीखेंगे कि Sass और इसकी सबसे महत्वपूर्ण विशेषताओं का उपयोग कैसे करें।

Sass स्थापित करना

आपके डिवाइस पर Sass का उपयोग करने के कई तरीके हैं। इनमें एप्लिकेशन चलाना (जैसे LiveReload या स्काउट-ऐप), डाउनलोड करना शामिल है गिटहब से सास, या इसे स्थापित करना एनपीएम. का उपयोग करना.

npm. के साथ सास स्थापित करना

npm का उपयोग करके Sass को स्थापित करने के लिए आपको आवश्यकता होगी NodeJS और npm स्थापित करें आपके डिवाइस पर। फिर आपको a. बनाना होगा पैकेज.जेसन फ़ाइल (जो आपकी परियोजनाओं में कोई npm पैकेज स्थापित करते समय एक अच्छा अभ्यास है)। आप एक बुनियादी बना सकते हैं

पैकेज.जेसन निम्नलिखित टर्मिनल कमांड के साथ अपनी परियोजना निर्देशिका में फ़ाइल करें:

npm init -y

इस आदेश को निष्पादित करने से निम्न सामग्री के साथ एक package.json फ़ाइल उत्पन्न होगी:

{
 "नाम": "my_app",
 "संस्करण": "1.0.0",
 "विवरण": "",
 "मुख्य": "index.js",
 "स्क्रिप्ट": {
 "परीक्षण": "गूंज \"त्रुटि: कोई परीक्षण निर्दिष्ट नहीं\" && बाहर निकलें 1"
 },
 "कीवर्ड": [],
 "लेखक": "",
 "लाइसेंस": "आईएससी"
}

पैकेज.जेसन फ़ाइल महत्वपूर्ण है क्योंकि यह आपके प्रोजेक्ट के लिए कॉन्फ़िगरेशन के रूप में कार्य करती है। हर बार जब आप एक नया npm पैकेज स्थापित करते हैं पैकेज.जेसन फ़ाइल इसे प्रतिबिंबित करेगी।

अब आप अपने टर्मिनल में निम्न कमांड डालकर Sass को स्थापित कर सकते हैं:

npm स्थापित sass

यह आदेश अद्यतन करेगा पैकेज.जेसन एक नया बनाकर फाइल करें निर्भरता क्षेत्र, जिसमें नया Sass पैकेज होगा। यह एक नया भी उत्पन्न करेगा पैकेज-लॉक.जेसन फ़ाइल और sass (प्लस निर्भरता) को a. में स्थापित करें नोड_मॉड्यूल निर्देशिका।

Sass फ़ाइल के विभिन्न प्रकार

एक Sass फ़ाइल में दो एक्सटेंशन में से एक हो सकता है, .sass या .एससीएसएस. उनके बीच मुख्य अंतर यह है कि .एससीएसएस फ़ाइल घुंघराले ब्रेसिज़ और अर्धविराम (सीएसएस की तरह) का उपयोग करती है, जबकि .sass फ़ाइल संरचना सीएसएस इंडेंटेशन (पायथन की तरह) का उपयोग कर। कुछ डेवलपर्स का उपयोग करना पसंद करते हैं .एससीएसएस फ़ाइल क्योंकि इसकी संरचना CSS के करीब है।

ए .scss फ़ाइल उदाहरण

$ प्राथमिक रंग: नीला;
तन {
 रंग: $ प्राथमिक-रंग;
 पी {
 लाल रंग;
 }
}

ए .sass फ़ाइल उदाहरण

$प्राथमिक-रंग: नीला
तन
 रंग: $प्राथमिक-रंग
 पी
 लाल रंग

एक एसएएस फ़ाइल को सीएसएस में संकलित करना

आप एक व्यक्तिगत Sass फ़ाइल का उपयोग करके संकलित कर सकते हैं सास कमांड लाइन प्रोग्राम:

sass file.scss > file.css

आप किसी विशिष्ट निर्देशिका में सभी फ़ाइलों में sass भी चला सकते हैं:

एसएएस एससीएसएस: जिला/सीएसएस/

वह आदेश सभी एसएएस फाइलों को संकलित करता है एससीएसएस निर्देशिका और परिणामी फ़ाइलों को संग्रहीत करता है जिला/सीएसएस.

यदि आप npm का उपयोग कर रहे हैं, तो आप sass संकलन के लिए एक सुविधाजनक शॉर्टकट सेट कर सकते हैं स्क्रिप्ट अपने क्षेत्र में पैकेज.जेसन फ़ाइल:

"स्क्रिप्ट": {
 "परीक्षण": "गूंज \"त्रुटि: कोई परीक्षण निर्दिष्ट नहीं\" && निकास 1",
 "sass": "sass --watch scss: dist/css/"
 },

यह कॉन्फ़िगरेशन का उपयोग करता है --घड़ी विकल्प। यह sass चालू रखता है और यह सुनिश्चित करता है कि जब भी वे बदलते हैं तो उन फ़ाइलों को पुन: संकलित करता है। प्रत्येक फ़ाइल के लिए, sass उत्पन्न करेगा a सीएसएस और एक .css.map फ़ाइल।

ऊपर Sass स्क्रिप्ट को निष्पादित करने के लिए आपको अपने टर्मिनल में निम्न कमांड निष्पादित करने की आवश्यकता होगी:

npm रन sass

उस कमांड को चलाने से इसके समान आउटपुट उत्पन्न होगा:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass -- वॉच scss: डिस्ट/सीएसएस/
संकलित scss\main.scss to dist\css\main.css.
सास परिवर्तनों के लिए देख रहा है। रोकने के लिए Ctrl-C दबाएं।

सैस वेरिएबल्स

आप आज CSS में वेरिएबल बना सकते हैं, लेकिन 15 साल पहले CSS वेरिएबल मौजूद नहीं थे, इसलिए उनके लिए Sass सपोर्ट मूल्यवान था। Sass वेरिएबल उसी तरह से काम करते हैं जैसे CSS वेरिएबल करते हैं। वे मूल्यों (जैसे रंग) को संग्रहीत करते हैं जिन्हें आप एक सीएसएस फ़ाइल में उपयोग करने का इरादा रखते हैं। चरों के मुख्य लाभों में से एक यह है कि वे आपको किसी मान को केवल एक ही स्थान पर बदलकर उसे कई घटनाओं को अद्यतन करने की अनुमति देते हैं।

प्रत्येक Sass चर डॉलर के चिह्न से शुरू होता है, उसके बाद वर्णों का कोई भी संयोजन होता है। अपने चरों को वर्णनात्मक बनाने का प्रयास करें, जैसे $प्राथमिक-रंग ऊपर उदाहरण। यह ध्यान रखना महत्वपूर्ण है कि एक Sass चर CSS चर में संकलित नहीं होता है। उदाहरण के लिए, यह .scss फ़ाइल:

$ प्राथमिक रंग: नीला;
तन {
 रंग: $ प्राथमिक-रंग;
}

निम्नलिखित सीएसएस को संकलित करेगा:

तन {
 नीला रंग;
}

जैसा कि आप ऊपर की फाइल से देख सकते हैं कि कोई CSS वैरिएबल नहीं हैं। चर का लाभ यह है कि Sass फ़ाइल में किया गया कोई भी परिवर्तन संबंधित CSS फ़ाइल को अद्यतन करेगा।

सैस मिक्सिन्स

यदि आपके पास एक संपत्ति है जिसे आप अपने पूरे प्रोजेक्ट में कई बार उपयोग करना चाहते हैं, तो एक चर बहुत अच्छा है। लेकिन अगर आपके पास संपत्तियों का एक समूह है जिसे आप एक इकाई के रूप में उपयोग करना चाहते हैं, तो एक मिश्रण काम करेगा।

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

मिक्सिन का उपयोग करना

@मिक्सिन लाइट-थीम ($ प्राइमरी-कलर: व्हाइट, $ सेकेंडरी-कलर: #2c2c2c) {
 फ़ॉन्ट-फ़ैमिली: 'फ्रैंकलिन गोथिक मीडियम', 'एरियल नैरो', एरियल, सेन्स-सेरिफ़;
 पृष्ठभूमि-रंग: $ प्राथमिक-रंग;
 रंग: $ माध्यमिक-रंग;
}
#घर {
 @include लाइट-थीम (नीला);
}

पहली बात जो आप ऊपर दिए गए कोड में देख सकते हैं, वह यह है कि मिश्रण दो तर्कों को स्वीकार करता है। आप तर्कों के लिए डिफ़ॉल्ट मान निर्दिष्ट कर सकते हैं और जब आप इसे शामिल करते हैं तो उन्हें ओवरराइड कर सकते हैं।

अपना मिक्सिन बनाने के बाद, आप इसका उपयोग करके अपनी वेबसाइट के किसी भी अनुभाग में इसका उपयोग कर सकते हैं @शामिल करना मिश्रण के नाम के बाद कीवर्ड।

उपरोक्त एसएएस कोड को संकलित करने से आपकी गंतव्य फ़ाइल में निम्नलिखित सीएसएस कोड उत्पन्न होगा:

#घर {
 फ़ॉन्ट-फ़ैमिली: "फ्रैंकलिन गोथिक मीडियम", "एरियल नैरो", एरियल, सेन्स-सेरिफ़;
 पृष्ठभूमि-रंग: नीला;
 रंग: #2c2c2c;
}

सैस फंक्शन्स

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

@ फ़ंक्शन ऐड-नंबर ($ संख्या-एक, $ संख्या-दो) {
 $ योग: 0;
 $ योग: $ संख्या-एक + $ संख्या-दो;
 @ वापसी $ योग 
}

उपरोक्त यह फ़ंक्शन दो संख्याओं को स्वीकार करता है और उनकी राशि लौटाता है। Sass फ़ंक्शंस में if स्टेटमेंट्स, लूप्स के लिए, और अन्य कंट्रोल फ़्लो स्टेटमेंट भी शामिल हो सकते हैं।

सैस मॉड्यूल

यदि आपको एक ही फाइल में अपने सभी वेरिएबल्स, मिक्सिन्स और फंक्शन्स को शामिल करना है, तो बड़े एप्लिकेशन बनाते समय आपके पास एक विशाल Sass फाइल होगी। मॉड्यूल बड़ी फ़ाइलों को छोटे में विभाजित करने का एक तरीका प्रदान करते हैं जो संकलन के दौरान sass को जोड़ती है। उदाहरण के लिए, आपके पास एक फ़ंक्शन मॉड्यूल और एक मिक्सिन मॉड्यूल हो सकता है, आपको केवल याद रखने की आवश्यकता है @उपयोग खोजशब्द।

यहां एक उदाहरण दिखाया गया है कि आप पिछले मिश्रण को अपनी फ़ाइल में कैसे अलग कर सकते हैं:

mixins.scss फ़ाइल

@मिक्सिन लाइट-थीम ($ प्राइमरी-कलर: व्हाइट, $ सेकेंडरी-कलर: #2c2c2c) {
 फ़ॉन्ट-फ़ैमिली: 'फ्रैंकलिन गोथिक मीडियम', 'एरियल नैरो', एरियल, सेन्स-सेरिफ़;
 पृष्ठभूमि-रंग: $ प्राथमिक-रंग;
 रंग: $ माध्यमिक-रंग;
}

मुख्य.एससीएसएस फ़ाइल

@use 'मिक्सिन्स';
#घर{
 @mixins.light-theme शामिल करें;
}

मॉड्यूल के रूप में बाहरी फ़ाइल को आयात और उपयोग करने के लिए, आपको इसका उपयोग करने की आवश्यकता होगी @उपयोग इसे आयात करने के लिए कीवर्ड। फिर, आयातित फ़ाइल से एक विशिष्ट मिक्सिन का उपयोग करने के लिए, विशिष्ट मिक्सिन नाम को फ़ाइल नाम के साथ एक अवधि के बाद उपसर्ग करें। उपरोक्त फाइलों को संकलित करने से निम्नलिखित सीएसएस कोड उत्पन्न होगा:

#घर {
 फ़ॉन्ट-फ़ैमिली: "फ्रैंकलिन गोथिक मीडियम", "एरियल नैरो", एरियल, सेन्स-सेरिफ़;
 पृष्ठभूमि-रंग: सफेद;
 रंग: #2c2c2c;
}

अपने CSS को विस्तारित और व्यवस्थित करने के लिए Sass का उपयोग करें

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

यह लेख आपको सिखाता है कि Sass को कैसे स्थापित और उपयोग किया जाए। आपने सीखा है कि Sass वेरिएबल्स, मिक्सिन्स, फंक्शन्स और मॉड्यूल्स कैसे बनाए जाते हैं। अब आपके लिए केवल एक HTML दस्तावेज़ बनाना और अपने Sass कोड को जीवंत होते देखना है।

8 आवश्यक सीएसएस टिप्स और ट्रिक्स हर डेवलपर को पता होना चाहिए

आगे पढ़िए

लेखक के बारे में