सिंटॅक्टिकली अप्रतिम स्टाइल शीट (Sass) ही एक लोकप्रिय CSS विस्तार भाषा आहे. ही भाषा सुमारे 15 वर्षांपासून अस्तित्वात आहे. हे CSS च्या प्रत्येक आवृत्तीसह चांगले कार्य करते, ते बूटस्ट्रॅपपासून फाउंडेशनपर्यंत प्रत्येक CSS लायब्ररी आणि फ्रेमवर्कशी सुसंगत बनवते.

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

या ट्युटोरियलमध्ये, तुम्ही Sass आणि त्याची सर्वात महत्त्वाची वैशिष्ट्ये कशी वापरायची ते शिकाल.

Sass स्थापित करा

तुमच्या डिव्हाइसवर Sass वापरण्याचे अनेक मार्ग आहेत. यामध्ये अनुप्रयोग चालवणे (जसे की LiveReload किंवा scout-app), GitHub वरून Sass डाउनलोड करणे किंवा npm वापरून स्थापित करणे समाविष्ट आहे.

एनपीएम सह sass स्थापित करा

npm वापरून Sass स्थापित करण्यासाठी तुम्हाला तुमच्या डिव्हाइसवर NodeJS आणि npm स्थापित करणे आवश्यक आहे. त्यानंतर तुम्हाला पॅकेज.json फाइल तयार करावी लागेल (जो तुमच्या प्रोजेक्टमध्ये एनपीएम पॅकेजेस इन्स्टॉल करताना चांगला सराव आहे). तुम्ही तुमच्या प्रोजेक्ट डिरेक्टरीमध्ये खालील टर्मिनल कमांडसह मूलभूत package.json फाइल तयार करू शकता.

package.json फाइल महत्त्वाची आहे कारण ती तुमच्या प्रोजेक्टसाठी कॉन्फिगरेशन म्हणून काम करते. प्रत्येक वेळी तुम्ही नवीन npm पॅकेज स्थापित कराल तेव्हा package.json फाइल हे प्रतिबिंबित करेल.

ही कमांड नवीन अवलंबित्व फील्ड तयार करून package.json फाइल अपडेट करेल, ज्यामध्ये नवीन Sass पॅकेज असेल. हे नवीन package-lock.json फाईल देखील तयार करेल आणि node_modules निर्देशिकेत sass (अधिक अवलंबन) स्थापित करेल.

Sass फाईल्सचे विविध प्रकार

Sass फाइलमध्ये दोनपैकी एक विस्तार असू शकतो, .sass किंवा .scss. त्यांच्यातील मुख्य फरक असा आहे की .scss फाईल कर्ली ब्रेसेस आणि अर्धविराम (CSS प्रमाणे) वापरते, तर .sass फाइल इंडेंटेशन वापरून CSS ची रचना करते (बरेच Python प्रमाणे). काही विकासक .scss फाईल वापरण्यास प्राधान्य देतात कारण तिची रचना CSS च्या जवळ आहे.

हे कॉन्फिगरेशन –watch पर्याय वापरते. हे sass चालू ठेवते आणि जेव्हा त्या फायली बदलतात तेव्हा ते पुन्हा संकलित करते याची खात्री करते. प्रत्येक फाईलसाठी, sass .css आणि .css.map फाइल तयार करेल.

वरील Sass स्क्रिप्ट कार्यान्वित करण्यासाठी तुम्हाला तुमच्या टर्मिनलमध्ये खालील कमांड कार्यान्वित करावी लागेल.

sass व्हेरिएबल्स

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

प्रत्येक Sass व्हेरिएबल डॉलर चिन्हाने सुरू होते, त्यानंतर वर्णांचे कोणतेही संयोजन. वरील $primary-color उदाहरणाप्रमाणे तुमचे व्हेरिएबल्स वर्णनात्मक बनवण्याचा प्रयत्न करा. हे लक्षात घेणे महत्त्वाचे आहे की Sass व्हेरिएबल CSS व्हेरिएबलमध्ये संकलित होत नाही.

वरील फाइलवरून तुम्ही बघू शकता की तेथे कोणतेही CSS व्हेरिएबल्स नाहीत. व्हेरिएबल्सचा फायदा असा आहे की Sass फाइलमध्ये केलेले कोणतेही बदल संबंधित CSS फाइल अपडेट करतात.

सास मिक्सन्स

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

प्रत्येक मिक्सिनची सुरुवात @mixin कीवर्डने होते, त्यानंतर तुम्ही मिक्सिनला नियुक्त करू इच्छिता. तुमच्याकडे मिक्सिनला पॅरामीटर्स म्हणून व्हेरिएबल्स पास करण्याचा आणि फंक्शनप्रमाणेच मिक्सिनच्या मुख्य भागामध्ये ते व्हेरिएबल्स वापरण्याचा पर्याय आहे.

sass कार्ये

भिन्न कीवर्ड व्यतिरिक्त, फंक्शन आणि मिक्सिनमधील मुख्य फरक म्हणजे फंक्शनने काहीतरी परत केले पाहिजे. तुम्ही मूल्यांची गणना करण्यासाठी किंवा ऑपरेशन्स करण्यासाठी Sass फंक्शन्स वापरू शकता.