वाक्यात्मक रूप से भयानक स्टाइल शीट (Sass) एक लोकप्रिय CSS एक्सटेंशन भाषा है। भाषा लगभग 15 वर्षों से अस्तित्व में है। यह CSS के हर संस्करण के साथ अच्छी तरह से काम करता है, जो इसे बूटस्ट्रैप से लेकर फाउंडेशन तक हर CSS लाइब्रेरी और फ्रेमवर्क के अनुकूल बनाता है।
Thank you for reading this post, don't forget to subscribe!
भाषा आपको Sass कोड लिखने और फिर उस कोड को CSS में संकलित करने की अनुमति देती है। सादे CSS के बजाय Sass का उपयोग करने का मूल्य यह है कि यह अतिरिक्त सुविधाएँ प्रदान करता है जो वर्तमान में CSS के दायरे से बाहर हैं।
इस ट्यूटोरियल में, आप सीखेंगे कि Sass और इसकी सबसे महत्वपूर्ण विशेषताओं का उपयोग कैसे करें।
Sass स्थापित करना
आपके डिवाइस पर Sass का उपयोग करने के कई तरीके हैं। इनमें एक एप्लिकेशन चलाना (जैसे LiveReload या स्काउट-ऐप), GitHub से Sass डाउनलोड करना, या npm का उपयोग करके इसे इंस्टॉल करना शामिल है।
Npm . के साथ सास स्थापित करना
npm का उपयोग करके Sass को स्थापित करने के लिए आपको अपने डिवाइस पर NodeJS और npm इंस्टॉल करना होगा। फिर आपको एक package.json फ़ाइल बनाने की आवश्यकता होगी (जो कि आपकी परियोजनाओं में किसी भी npm पैकेज को स्थापित करते समय एक अच्छा अभ्यास है)। आप निम्न टर्मिनल कमांड के साथ अपनी प्रोजेक्ट डायरेक्टरी में एक बेसिक package.json फाइल बना सकते हैं।
package.json फ़ाइल महत्वपूर्ण है क्योंकि यह आपके प्रोजेक्ट के लिए कॉन्फ़िगरेशन के रूप में कार्य करती है। हर बार जब आप एक नया npm पैकेज स्थापित करते हैं तो package.json फ़ाइल इसे प्रतिबिंबित करेगी।
यह कमांड एक नया डिपेंडेंसी फील्ड बनाकर package.json फाइल को अपडेट करेगा, जिसमें नया Sass पैकेज होगा। यह एक नया पैकेज-lock.json फ़ाइल भी उत्पन्न करेगा और एक नोड_मॉड्यूल निर्देशिका में sass (प्लस निर्भरता) स्थापित करेगा।
Sass फ़ाइल के विभिन्न प्रकार
एक Sass फ़ाइल में दो एक्सटेंशन, .sass या .scss में से एक हो सकता है। उनके बीच मुख्य अंतर यह है कि .scss फ़ाइल घुंघराले ब्रेसिज़ और अर्धविराम (CSS की तरह) का उपयोग करती है, जबकि .sass फ़ाइल इंडेंटेशन (काफी हद तक पायथन की तरह) का उपयोग करके CSS की संरचना करती है। कुछ डेवलपर .scss फ़ाइल का उपयोग करना पसंद करते हैं क्योंकि इसकी संरचना CSS के करीब है।
यह कॉन्फ़िगरेशन –watch विकल्प का उपयोग करता है। यह sass चालू रखता है और यह सुनिश्चित करता है कि जब भी वे बदलते हैं तो उन फ़ाइलों को पुन: संकलित करता है। प्रत्येक फ़ाइल के लिए, sass एक .css और एक .css.map फ़ाइल जनरेट करेगा।
ऊपर Sass स्क्रिप्ट को निष्पादित करने के लिए आपको अपने टर्मिनल में निम्न कमांड निष्पादित करने की आवश्यकता होगी।
सैस वेरिएबल्स
आप आज CSS में वेरिएबल बना सकते हैं, लेकिन 15 साल पहले CSS वेरिएबल मौजूद नहीं थे, इसलिए उनके लिए Sass सपोर्ट मूल्यवान था। Sass वेरिएबल उसी तरह से काम करते हैं जैसे CSS वेरिएबल करते हैं। वे मूल्यों (जैसे रंग) को संग्रहीत करते हैं जिन्हें आप एक सीएसएस फ़ाइल में उपयोग करने का इरादा रखते हैं। चरों के मुख्य लाभों में से एक यह है कि वे आपको किसी मान को केवल एक ही स्थान पर बदलकर उसे कई घटनाओं को अद्यतन करने की अनुमति देते हैं।
प्रत्येक Sass चर डॉलर के चिह्न से शुरू होता है, उसके बाद वर्णों का कोई भी संयोजन होता है। अपने चरों को वर्णनात्मक बनाने का प्रयास करें, जैसे ऊपर दिए गए $प्राथमिक-रंग उदाहरण। यह ध्यान रखना महत्वपूर्ण है कि एक Sass चर CSS चर में संकलित नहीं होता है।
जैसा कि आप ऊपर की फाइल से देख सकते हैं कि कोई CSS वैरिएबल नहीं हैं। चर का लाभ यह है कि Sass फ़ाइल में किया गया कोई भी परिवर्तन संबंधित CSS फ़ाइल को अद्यतन करेगा।
सैस मिक्सिन्स
यदि आपके पास एक संपत्ति है जिसे आप अपने पूरे प्रोजेक्ट में कई बार उपयोग करना चाहते हैं, तो एक चर बहुत अच्छा है। लेकिन अगर आपके पास संपत्तियों का एक समूह है जिसे आप एक इकाई के रूप में उपयोग करना चाहते हैं, तो एक मिश्रण काम करेगा।
प्रत्येक मिक्सिन @mixin कीवर्ड से शुरू होता है, उसके बाद उस नाम से जिसे आप मिक्सिन को असाइन करना चाहते हैं। आपके पास मिक्सिन को पैरामीटर के रूप में वैरिएबल पास करने और मिक्सिन के शरीर के भीतर उन वेरिएबल्स का उपयोग करने का विकल्प है, ठीक उसी तरह जैसे एक फंक्शन।
सैस फंक्शन्स
विभिन्न कीवर्ड के अलावा, फ़ंक्शन और मिक्सिन के बीच मुख्य अंतर यह है कि फ़ंक्शन को कुछ वापस करना होगा। आप मानों की गणना करने या संचालन करने के लिए Sass फ़ंक्शन का उपयोग कर सकते हैं।