sass ट्यूटोरियल
सास के साथ शुरुआत करना

टिप्पणियों

संस्करण

सेट अप

जब SASS का उपयोग करने की बात आती है, तो आपके कार्यक्षेत्र को स्थापित करने के कई तरीके हैं। कुछ लोग कमांड लाइन टूल (शायद लिनक्स के लोग) का उपयोग करना पसंद करते हैं और अन्य लोग जीयूआई अनुप्रयोगों का उपयोग करना पसंद करते हैं। मैं दोनों को कवर करूंगा।

कमांड लाइन उपकरण

sass-lang.com पर 'इंस्टॉल करें' पृष्ठ sass-lang.com अच्छी तरह से कवर करता है। आप SASS का उपयोग रूबी के साथ कर सकते हैं (जिसे लिनक्स पैकेज मैनेजर से इंस्टॉल किया जा सकता है या आप विंडोज पर इंस्टॉलर डाउनलोड कर सकते हैं)। MacOS रूबी पूर्व-स्थापित के साथ आता है।

एक बार जब आप रूबी स्थापित कर लेते हैं, तो आपको SASS (कुछ मामलों में, sudo आवश्यकता नहीं हो सकती है) स्थापित करने की आवश्यकता है:

sudo gem install sass

अंत में, आप sass -v साथ SASS को स्थापित कर सकते हैं।

जीयूआई अनुप्रयोग

जब भी आपके द्वारा उपयोग किए जाने वाले कई GUI एप्लिकेशन हैं, तो मैं स्काउट-ऐप की सलाह देता हूं। यह आपके लिए अपने CSS फाइलों को ऑटो-बिल्ड और कम्प्रेस करता है, जो फ़ाइल सेव पर और macOS, विंडोज और लिनक्स को सपोर्ट करता है।

चर

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

एक चर को परिभाषित करने के लिए, आपको $ प्रतीक के साथ इसका नाम उपसर्ग करना होगा। (जैसे आप PHP में होंगे।)

आप किसी वैरिएबल के अंदर किसी भी वैध सीएसएस संपत्ति मूल्य को स्टोर कर सकते हैं। जैसे कि रंग, फोंट या यूआरएल।

उदाहरण 1:

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;
}

p {
    color: rgb(25, 25, 20);
    background-color: $background;
}

आयात कर रहा है

चलो निम्नलिखित परिदृश्य को मानते हैं: आपके पास दो स्टाइलशीट हैं: _variables.scss और layout.scss । तार्किक रूप से, आप अपने चर चर के अंदर अपने सभी चर रखते हैं, लेकिन उन्हें अपनी लेआउट शैली पत्रक से एक्सेस करना चाहते हैं।

नोट: आप देख सकते हैं कि चर स्टाइलशीट में एक अंडरस्कोर ('_') है, इससे पहले कि वह नाम हो। इसका कारण यह है कि यह एक आंशिक - अर्थ है कि यह आयात होने जा रहा है।

sass-lang.com निम्नलिखित भाग के बारे में कहता है: आप आंशिक Sass फाइलें बना सकते हैं जिनमें CSS के छोटे टुकड़े होते हैं जिन्हें आप अन्य Sass फाइलों में शामिल कर सकते हैं। यह आपके CSS को modularize करने और चीजों को बनाए रखने में आसान बनाने में मदद करने का एक शानदार तरीका है। [...] अंडरस्कोर सेस को पता चलता है कि फाइल केवल एक आंशिक फाइल है और इसे सीएसएस फाइल में जेनरेट नहीं किया जाना चाहिए। @ Partport के निर्देशन के साथ Sass partials का उपयोग किया जाता है।

SCSS चर इस परिदृश्य के लिए महान हैं। मान _variables.scss हैं कि आपके _variables.scss इस तरह दिखते हैं:

$primary-color: #333;

आप इसे @import साथ आयात कर सकते हैं और फिर स्टाइलशीट का नाम उद्धरणों में कर सकते हैं। आपकी लेआउट स्टाइलशीट अब इस तरह दिख सकती है (ध्यान दें कि आयात में अंडरस्कोर या फ़ाइल एक्सटेंशन नहीं है):

@import 'variables';
body {
  color: $primary-color;
}

यह निम्नलिखित की तरह कुछ उत्पादन होगा:

body {
  color: #333;
}

घोंसला करने की क्रिया

layout.scss

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            margin: 0 5px;
           }
       }
}

उत्पादन

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    margin: 0 5px;    
}

टिप्पणियाँ

SASS दो प्रकार की टिप्पणियों का समर्थन करता है:

• इनलाइन टिप्पणियाँ - ये केवल एक पंक्ति को दर्शाती हैं और आमतौर पर एक चर या ब्लॉक का वर्णन करने के लिए उपयोग की जाती हैं। वाक्य-विन्यास इस प्रकार है: // Your comment here (आप इसे डबल स्लैश ( // ) के साथ प्रस्तुत करते हैं और शेष पंक्ति को पार्सर द्वारा अनदेखा किया जाता है।

• बहुस्तरीय टिप्पणियां - ये कई पंक्तियों को फैलाती हैं और आमतौर पर किसी दस्तावेज़ के शीर्ष पर कॉपीराइट या लाइसेंस प्रदर्शित करने के लिए उपयोग की जाती हैं। आप /* साथ एक बहु-भाषी टिप्पणी खंड खोल सकते हैं और आप */ साथ बहु-भाषी टिप्पणी खंड को बंद कर सकते हैं। यहाँ एक उदाहरण है:

/*
   This is a comment
   It's a multiline comment
   Also a hiaku
*/