सैस इंस्टालेशन और बेसिक्स के साथ शुरुआत करना
इस पोस्ट में, हम एक सीएसएस प्रीप्रोसेसर पर चर्चा करने जा रहे हैं जिसे सैस या कहा जाता है सिंथेटिक रूप से बहुत बढ़िया स्टाइलशीट.
यदि आप LESS पर हमारी पिछली पोस्टों का अनुसरण करते रहे हैं, तो हमें यकीन है कि आप इससे परिचित हैं सीएसएस प्रीप्रोसेसर. सैस और लेस दोनों सीएसएस प्रीप्रोसेसर हैं, जो मुख्य रूप से वैरीएबल्स, मिक्सिन्स और फंक्शंस जैसी प्रोग्रामिंग भाषाओं का उपयोग करके सादे-स्थिर-सीएसएस को अधिक गतिशील तरीके से बढ़ाते हैं।.
सैस लगाना
इससे पहले कि हम सैस की रचना कर सकें, हमें इसे स्थापित करने की आवश्यकता है. रूबी पर सैस बनाया गया है. यदि आप एक मैक पर काम कर रहे हैं, तो संभावना है, आपके पास पहले से ही रूबी स्थापित है। यदि आप रूबी को विंडोज में स्थापित करना चाहते हैं, तो इस रूबी इंस्टॉलर का उपयोग करें.
स्थापना पूर्ण होने के बाद, आप टर्मिनल (मैक पर) या कमांड प्रॉम्प्ट (विंडोज पर) पर जा सकते हैं, फिर उसमें निम्न कमांड लाइन टाइप करें:
मैक पर;
सूद मणि स्थापित सैस
विंडोज पर;
मणि स्थापित सास
यदि स्थापना सफल हो जाती है, तो आपके टर्मिनल / कमांड प्रॉम्प्ट में निम्नलिखित अधिसूचना होगी.
इसके बाद, हमें निम्नलिखित कमांड का उपयोग करके देखने के लिए किस निर्देशिका का चयन करने की आवश्यकता है;
sass - वॉच पाथ / sass- डायरेक्टरी
ऊपर की कमांड लाइन हर कोई देखेगा .एससीएसएस/.सास में फ़ाइलें पथ / निर्देशिका और जब भी उस निर्देशिका की कोई एक फाइल बदली जाती है, तो Sass संबंधित फाइलों को अपडेट करेगा या यदि कोई मौजूद नहीं है तो एक बना देगा.
यदि हमें किसी विशिष्ट निर्देशिका में फ़ाइलों को उत्पन्न करने के लिए सैस की आवश्यकता है, तो हम इसे इस तरह से कर सकते हैं;
sass - वॉच पाथ / sass-directory: पाथ / css- डायरेक्टरी
हम इस कमांड लाइन के साथ डायरेक्टरी के बजाय एक विशिष्ट फ़ाइल देख सकते हैं;
sass - वॉच पाथ / sass-directory / styles.css
यदि वॉच कमांड सफल होता है, तो नीचे दी गई यह सूचना आपके टर्मिनल / कमांड प्रॉम्प्ट में दिखाई देगी.
आगे की पढाई: ऑटो कंपाइल सैस फाइलें सैस 3 के साथ
सैस एप्लीकेशन
हालांकि, यदि आप टर्मिनल या कमांड प्रॉम्प्ट के माध्यम से काम करने से नफरत करते हैं, तो आप सैस के लिए कुछ एप्लिकेशन का उपयोग कर सकते हैं। मुफ्त विकल्प स्काउट है; इसे Adobe Air पर बनाया गया है, इसलिए इसे सभी OS (Windows, OSX और Linux) पर चलाया जा सकता है.
हालाँकि, यह बहुत धीमी गति से चलता है जैसा कि कुछ पहले रिपोर्ट कर चुके हैं.
इसलिए यदि आपके पास इसके लिए धैर्य नहीं है, तो कुछ भुगतान विकल्प भी हैं। प्रत्येक ऐप के लिए मूल्य भिन्न होता है, Compass.app $ 10, Fire.app, $ 14 और कोडकिट $ 25 के लिए चला जाता है.
कोड हाइलाइटिंग
हालाँकि Sass मुख्य रूप से CSS एक्सटेंशन है, आपका वर्तमान संपादक वाक्यविन्यास को ठीक से उजागर नहीं कर सकता है। सौभाग्य से, सक्षम करने के लिए लगभग किसी भी कोड संपादक के लिए पहले से ही कुछ पैकेज हैं .सास या .एससीएसएस कोड हाइलाइटिंग.
यदि आप सबलाइम टेक्स्ट 2 के साथ काम कर रहे हैं जैसे मैं करता हूं, तो आप इन पैकेजों का उपयोग कर सकते हैं; उदात्त पाठ HAML और Sass और उदात्त पाठ 2 Sass पैकेज, और एक आसान तरीका के लिए, आप पैकेज नियंत्रण के माध्यम से इनमें से किसी एक पैकेज को स्थापित कर सकते हैं.
अन्य कोड संपादकों के लिए, नीचे देखें या इसके लिए Googling आज़माएं.
- यह एक ड्रीमवेवर के साथ सैस पर काम करने के लिए एक महान स्क्रैचस्ट ट्यूटोरियल है
- कोडा के लिए सैस मोड। लेकिन, ऐसा लगता है कि इस मोड को कोड 2 के रूप में कोडा के साथ एकीकृत किया गया है
- TextMate आधिकारिक SCSS बंडल
- एस्प्रेसो चीनी सास के लिए
- टूथपेस्ट बंडलों
सैस भाषा
सास और लेस वास्तव में कुछ सामान्य भाषाओं को साझा करते हैं, नीचे उनमें से कुछ हैं.
चर
$ रंग-आधार: # 000; $ चौड़ाई: 100px;
लेस वैरिएबल से एकमात्र अंतर यह है कि Sass में वेरिएबल a से परिभाषित किया गया है $ संकेत.
नेस्टिंग नियम
शीर्ष लेख चौड़ाई: 980px; ऊंचाई: 80 पीएक्स; नौसेना उल सूची-शैली: कोई नहीं; गद्दी: कोई नहीं; मार्जिन: कोई नहीं; ली प्रदर्शन: इनलाइन; पाठ-सजावट: कोई नहीं;
मिश्रण और कार्य
@ मिक्सिन बॉर्डर-रेडियस ($ त्रिज्या) -मोज-बॉर्डर-रेडियस: $ रेडियस; -webkit- सीमा-त्रिज्या: $ त्रिज्या; -ms-border-radius: $ त्रिज्या; सीमा-त्रिज्या: $ त्रिज्या;
संचालन
ली चौड़ाई: $ चौड़ाई / 5 - 10 पीएक्स;
सशर्त बयान
@if लपट ($ रंग-आधार)> = 51% पृष्ठभूमि-रंग: # 333333; @else पृष्ठभूमि-रंग: #ffffff;
LESS में आप गार्ड अभिव्यक्ति के माध्यम से एक समान कार्य कर सकते हैं, जिसे हमने इस ट्यूटोरियल में शामिल किया है.
फाइनल थॉट
और बस। अगली पोस्ट में, हम Sass भाषाओं और इसके साथी, Compass की खोज शुरू करेंगे। बने रहें.
