एससीएसएस - ए लिटिल प्रैक्टिस, भाग I

SASS ( SCSS ) के बारे में लेख, पहले से ही हब्बरहाब पर भरे हुए हैं, लेकिन मेरी राय में यह पर्याप्त नहीं है जिसमें थोड़ा वास्तविक अभ्यास होगा। मैं इस अंतर को भरने की कोशिश करूंगा। लगभग एक साल पहले, SASS लेखों में से एक ने मुझे "आच्छादित" किया था, और तब से मुझे इस तकनीक से इतना प्यार हो गया है कि नियमित CSS कोड का मैनुअल टाइपिंग समय की अतिरिक्त बर्बादी जैसा लगता है। यह लेख उन टाइपसेटर्स (या वेब-प्रोग्रामर्स) के लिए समर्पित है जिन्होंने SCSS के बारे में नहीं सुना है, या अभी तक इसकी कोशिश नहीं की है। अधिक अनुभवी कामरेड, मेरा मानना ​​है कि इसमें पकड़ने के लिए कुछ भी नहीं है।

SCSS क्या है

SCSS SASS भाषा की "बोली" है। और SASS क्या है? SASS HAML (एक बहुत संक्षिप्त टेम्पलेट इंजन) के समान भाषा है, लेकिन CSS कोड के निर्माण को सरल बनाने के लिए डिज़ाइन किया गया है। सीधे शब्दों में कहें तो SASS एक ऐसी भाषा है जिसका कोड नियमित रूप से CSS कोड में विशेष रूबी-प्रोग्राम के साथ अनुवादित किया जाता है। इस भाषा का सिंटैक्स बहुत लचीला है, यह सीएसएस में वांछित कई छोटी चीजों को ध्यान में रखता है। इसके अलावा, इसमें तर्क (@if, प्रत्येक ), गणित (आप संख्या, रेखाएं और रंग जोड़ सकते हैं) भी हैं। शायद एससीएसएस की कुछ विशेषताएं आपको बेमानी लगेंगी, लेकिन, मेरी राय में, वे अतिश्योक्तिपूर्ण नहीं होंगे, वे "रिजर्व में" रहेंगे।

SCSS और SASS में अंतर यह है कि SCSS नियमित CSS कोड की तरह है। SASS कोड उदाहरण:

 $blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue 

और SCSS पर समान:

 $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } 

मैंने इस तथ्य को देखते हुए SCSS को चुना कि उन सहयोगियों के लिए समझना आसान है जो अभी तक इससे परिचित नहीं हैं। यह भी ध्यान दिया जाना चाहिए कि नियमित सीएसएस कोड एससीएसएस सिंटैक्स में फिट बैठता है।

स्थापना और उपयोग

पहले आपको माणिक स्थापित करने की आवश्यकता है। फिर आपको sass-gem (कंसोल में gem install sass ) स्थापित करने की आवश्यकता है। यदि सब कुछ सुचारू रूप से चला गया, तो अब आपके लिए sass कंसोल प्रोग्राम उपलब्ध है। आप इसके उपयोग की सभी बारीकियों के बारे में यहाँ पढ़ सकते हैं - sass --help । मैं केवल दो बुनियादी विशेषताओं के बारे में बात करूंगा:

--watch

यदि आप - --watch कुंजी के साथ सैस चलाते हैं, तो प्रोग्राम आपके द्वारा निर्दिष्ट फाइलों की निगरानी करेगा। उनके परिवर्तन के मामले में, यह सभी आवश्यक सीएसएस-फाइलों को स्वचालित रूप से पुन: व्यवस्थित करेगा (सभी में नहीं, लेकिन केवल उन लोगों से जुड़ा हुआ है)।

मान लें कि आपके पास निम्नलिखित प्रोजेक्ट संरचना है:

 -- css ---- scss ------ style.scss ---- style.css 

यह आवश्यक है कि sass css/scss/* में सभी परिवर्तनों को ट्रैक करे और परिणाम को css/*.css में सेव करे। इस स्थिति में, इस तरह से sass --watch css/scss:css/. - sass --watch css/scss:css/. । यानी sass - --watch []:[] ।

--update

यदि आपको एक बार सीएसएस फ़ाइलों को अपडेट करने की आवश्यकता है, तो --update --watch स्थान पर --watch उपयोग करते हैं। कोई निगरानी नहीं की जाएगी, साथ ही अपडेट की आवश्यकता के लिए जांच की जाएगी।

यह ध्यान देने योग्य है कि, Less विपरीत, SASS अपने कोड को सीधे ब्राउज़र में संकलित करने में सक्षम नहीं है। मेरी राय में, इस तरह के एक दृष्टिकोण (एक सर्वर या एक पीसी कोडर पर संकलन) एकमात्र सच है।

अभ्यास

तो, हम सबसे महत्वपूर्ण बात पर आते हैं। चलिए @import शुरू करते हैं।

@import

प्रारंभ में, SCSS का उपयोग करने से पहले, इंजन का सभी सीएसएस कोड, जिसे मुझे ड्यूटी पर काम करना होता है, पहली विशाल शैली में था। फाइल। माई आईडीई (नेटबीन्स (वैसे, यहां सिंटैक्स हाइलाइटिंग के लिए प्लगइन है )) ने इसके साथ महत्वपूर्ण ब्रेक के साथ काम किया। लेकिन कोई भी इसे कई छोटी फाइलों में विभाजित नहीं करना चाहता था, और यदि आवश्यक हो, तो उन्हें 1 में गोंद करें। SCSS इस मुद्दे को स्वचालित रूप से हल करता है।

यह 1 बारीकियों को ध्यान देने योग्य है। यदि sass को किसी विशेष स्रोत फ़ाइल को नहीं, बल्कि एक निर्देशिका को खिलाया जाता है, तो _ साथ शुरू होने वाली फ़ाइलों के लिए css फाइलें उत्पन्न नहीं होंगी। यानी style.scss फ़ाइल की उपस्थिति style.css के निर्माण की ओर ले जाएगी, लेकिन _some.scss फ़ाइल की उपस्थिति नहीं _some.scss ।

इसलिए, हम _template.scss या template.scss फ़ाइल की सामग्री को शामिल करने के लिए लिखते हैं

 @import "template"; //  

अंततः, 1 बड़ी style.css बजाय। फाइल के रूप में, मुझे सौ से अधिक छोटी scss फाइलें मिलीं। पहली नज़र में ऐसा लग सकता है कि इतनी मात्रा बहुत बड़ी है और इससे भयानक पीड़ा होगी। हालाँकि, मुझे सुविधाजनक डायरेक्टरी संरचना के आधार पर मुझे तुरंत चाहिए फ़ाइल चाहिए। इसके अलावा, मेरा मानना ​​है कि इस तरह की "स्कीम" के कैशिंग के कारण अधिक उत्पादक है।

@ घोंसला बनाना

सबसे वांछनीय सीएसएस सुविधाओं में से एक चयनकर्ताओं का घोंसला बनाना है। एक उदाहरण:

 #some { border: 1px solid red; .some { background: white; } } /* => */ #some { border: 1px solid red; } #some .some { background: white; } 

एक और उदाहरण:

 input { border: 1px solid gray; background: white; &[type=text] { color: black; } &.some_class { display: none; } } /* => */ input { border: 1px solid gray; background: white; } input[type=text] { color: black; } input.some_class { display: none; } 

& सिंबल पैरेंट सिलेक्टर के बराबर है। मान लें कि <body> का टैग हमारे पास ie_7 वर्ग का है, यदि हमारे पास Internet Explorer 7 ब्राउज़र के रूप में है। निम्नलिखित कोड आपको सभी "हैक" और विशेष टिप्पणियों से छुटकारा पाने की अनुमति देता है:

 $IE_7: 'body.ie_7'; //... .some { display: inline-block; #{$IE_7} & { zoom: 1; display: inline; } } /* => */ .some { display: inline-block; } body.ie_7 .some { zoom: 1; display: inline; } 

$ चर

चर एक सुविधाजनक चीज है। उन्हें निम्नानुसार परिभाषित किया गया है:

 $some: red; 

चर निरंतर नहीं हैं, उन्हें कोड के पाठ्यक्रम में बदला जा सकता है :) मेरा पहला विचार _const.scss फ़ाइल में बदल गया, जिसमें सभी मूल रंग, फ़ॉन्ट आकार, आदि शामिल हैं।

 $link: #15157d; $link_bottom: $link; $input_font_size: 13px; $content_bg: #F1F1F1; $input_color: #4E4D4D; $input_color_placeholder: #959595; $text_color: black; ... 

साइट पर लिंक का रंग $link माना जाता है।

 a { color: $link; } span.link { color: $link; text-decoration: underline; } 

यदि भविष्य में यह पता चला है कि लिंक का रंग बदल गया है - बस 1 चर बदलें (सीएसएस के मामले में, आपको फ़ाइल द्वारा ऑटो-प्रतिस्थापन से गुजरना होगा, शायद चुनिंदा रूप से भी)। मान लीजिए कि, अचानक, यह पता चला है कि कुछ contacts मॉड्यूल में, लिंक का रंग अलग है। कम से कम दो समाधान हैं।

पहला एक:

 $contacts_link: orange; //     $contacts_link  $link 

दूसरा

 $__link: $link; $link: orange; //   $link: $__link; 

चर नहीं टाइप किए जाते हैं, इसलिए समान सफलता के साथ उनमें तार, संख्या और रंग शामिल हो सकते हैं।

@ गणित

हम गणित को 2 श्रेणियों में विभाजित करते हैं - रंग और संख्या। चलो नंबरों से शुरू करते हैं। एक सरल उदाहरण:

 .block { $block_width: 500px; padding: 5px; border: 1px solid black; width: $block_width - ( 5px * 2 ) - ( 1px * 2 ); } 

यदि वांछित है, तो आप चर के साथ सीमा के साथ पैडिंग भी सेट कर सकते हैं। यह सब लेआउट जटिलता पर निर्भर करता है।

एक और उदाहरण:

 .block { $count: 10; $margin_left: 5px; $all_width: 1000px; width: $all_width; .sub_element { width: ( $all_width / $count ) - $margin_left; margin: 0 0 0 $margin_left; } } 

मैं यह नोट करना चाहता हूं कि इस तरह के हेरफेर का उपयोग अक्सर किया जाता है। उनके बिना मैं बिना पैरों के हूं।

और अब रंग। रंग जोड़ा जा सकता है, गुणा:

 .some { $color: #010203; color: $color; border-color: $color - #010101; &:hover { color: #010203 * 2; } } /* => */ .some { color: #010203; border-color: #000102; } .some:hover { color: #020406; } 

बहुत सुविधाजनक बात है जब रंग लेने के लिए बहुत आलसी। opacify और transparentize जैसे कार्य भी उपलब्ध हैं (अधिक विस्तार से )।

@ लाइन

SASS लाइनों को स्टैक कर सकते हैं और #{} के निर्माण का समर्थन भी करते हैं

 $image_dir: 'images/web/'; $page: 12; .some { background-image: url( $image_dir + 'pen.gif' ); &:before { content: " #{ $page }!"; } } /* => */ .some { background-image: url("images/web/pen.gif"); } .some:before { content: " 12!"; } 

मेरा मानना ​​है कि स्ट्रिंग ऑपरेशन का सबसे बड़ा उपयोग @ मिश्रणों और चर छवि पथों को इंगित करने में पाया जा सकता है, आदि।

लेख

चूँकि यह लेख काफी बड़ा था, इसलिए मैंने इसे 2 भागों में तोड़ने का फैसला किया। निम्नलिखित लेख में मैं (सिंटैक्स और स्कोप) पर विचार करूंगा:

• @mixin - कस्टम फ़ंक्शन
• @if - स्थितियां
• @each - लूप
• एक साइट के लिए कई डिजाइन
• पाठकों के अनुरोध पर

संदर्भ

• आधिकारिक भाषा पृष्ठ
• सैंडबॉक्स
• प्रलेखन