🤽🏼 👩🏽‍🤝‍👩🏻 🛌🏿 SCSS: उपयोगी तकनीकों के एक जोड़े ⛑️ 🚶🏻 🖲️

CSS प्रीप्रोसेसर वेब डेवलपर्स के बीच तेजी से लोकप्रिय हैं। क्यों?
क्योंकि वे अनुमति देते हैं:

समय बचाओ
सीएसएस में DRY सिद्धांत लागू करें
कोड को अधिक पठनीय बनाएं।

वर्तमान में, सबसे लोकप्रिय प्रीप्रोसेसर SASS और LESS हैं।

आप इस बारे में पढ़ सकते हैं कि इस लेख में SASS LESS से बेहतर क्यों है । क्या यह बेहतर है - एक मुकुट बिंदु, हालांकि, मैंने LESS से SCSS में स्विच किया है यदि केवल इसलिए कि वहाँ है:

चक्र
सशर्त बयान
सूचियों

आप इस लेख में SCSS और SASS सिंटैक्स की तुलना करने के बारे में पढ़ सकते हैं। व्यक्तिगत रूप से, मैंने CSS के साथ पिछड़ी संगतता के कारण SCSS को चुना और, परिणामस्वरूप, आयात निर्देश का उपयोग करके परियोजना में पुरानी CSS फाइलों को जल्दी से शामिल करने की क्षमता है। ऐसा करने के लिए, उन्हें एक्सटेंशन को .scss में बदलना होगा ।

Faiwer ¹ और AbleBoy ² ने पहले से ही SCSS बेसिक्स के बारे में लिखा था, यहाँ मैं कुछ तकनीकों का वर्णन करना चाहता हूँ जिन्होंने वास्तव में मेरी मदद की।

iterators

SCSS में लूप्स हैं , और यह बहुत अच्छा है!
मान लीजिए कि हमारे पास एक साइट रंग पैलेट है, और हम मेनू को उसके सभी रंगों में रंगना चाहते हैं।

index.html :

<!DOCTYPE html> <html> <head> <title> </title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <nav class="menu-main"> <ul> <li class="red"><a href="#"></a></li> <li class="orange"><a href="#"></a></li> <li class="green"><a href="#"></a></li> <li class="blue"><a href="#"></a></li> <li class="purple"><a href="#"></a></li> </ul> </nav> </body> </html>

style.scss :

 $colors: #f74a3a #fcbe26 #8cc687 #4da5f2 #b01395; $i:0; .menu-main ul li { @each $col in red, orange, green, blue, purple { $i: $i + 1; &.#{$col} { background: nth($colors, $i); } } }

एससीएसएस में कोई वृद्धि नहीं है (इसके लिए इसके अलावा, लेकिन हमें फॉरेक्स के एनालॉग की आवश्यकता है), इसलिए इस चाल की आवश्यकता है। लेकिन एक ही समय में हमें $ रंगों की सूची के माध्यम से जाने के लिए एक पूर्ण चलने वाला पुनरावृत्ति प्राप्त होता है!
ऐसा कॉम्पैक्ट कोड ऐसे CSS कोड में बदल जाता है:

style.css

 .menu-main ul li.red { background: #f74a3a; } .menu-main ul li.orange { background: #fcbe26; } .menu-main ul li.green { background: #8cc687; } .menu-main ul li.blue { background: #4da5f2; } .menu-main ul li.purple { background: #b01395; }

जवाब-टू

इस तकनीक का उपयोग करके, आप उत्तरदायी लेआउट के लिए मीडिया क्वैश्चंस को कॉम्पैक्ट और आसानी से लिख सकते हैं।

style.scss

 //  mixin @mixin respond-to($media) { @if $media == handhelds { @media only screen and (max-width: 479px) { @content; } } @else if $media == wide-handhelds { @media only screen and (min-width: 480px) and (max-width: 767px) { @content; } } @else if $media == tablets { @media only screen and (min-width: 768px) and (max-width: 959px) { @content; } } } .menu-main { float: left; width: 300px; //   @include respond-to(handhelds) { float: none; }; //      @include respond-to(wide-handhelds) { float: none; }; //   @include respond-to(tablets) { width: 240px; }; }

CSS में, यह इतना कॉम्पैक्ट नहीं लगेगा, विशेष रूप से इस मिक्सिन के बार-बार उपयोग को देखते हुए:

style.css

 .menu-main { float: left; width: 300px; } @media only screen and (max-width: 479px) { .menu-main { float: none; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .menu-main { float: none; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .menu-main { width: 240px; } }

क्रिस Eppstein ³ द्वारा SCSS और SASS में मिश्रणों के बारे में और पढ़ें

और आप SCSS के माध्यम से जीवन को कैसे अधिक सुविधाजनक बनाते हैं?

¹ - "एससीएसएस - थोड़ा अभ्यास, भाग I"
² - "SCSS और कम्पास फ्रेमवर्क के बारे में आलसी व्यक्ति का ध्यान रखें"
³ - क्रिस एपस्टीन, जीथब: जिस्ट, 1215856

UPD: इस जाम के साथ बहुत सारे मीडिया प्रश्नों की समस्या हल हो सकती है।

SCSS: उपयोगी तकनीकों के एक जोड़े

iterators

जवाब-टू

More articles: