🧑🏽‍🤝‍🧑🏼 🤞🏿 👤 एक उदाहरण के साथ कोड स्कूल और उसके बाद के विश्वदृष्टि पर सैस पाठ्यक्रम (.less, .scss और .ass देखें 👨‍🍳 ✍🏿 🚞

सितंबर में, मैंने एसस में कोड स्कूल में एक पाठ्यक्रम लिया, जिसे असेंबलिंग सास कहा जाता है , और इसे सीएसएस और सास में गुरु निक वॉल्श को सिखाया। पाठ्यक्रम पूरी तरह से स्वतंत्र है। इसे पारित करने के बाद, मुझे आश्चर्य हुआ कि मैं खुद पर क्या कोशिश करूं। मेरे मित्र ने हाल ही में "कम पंच" पर लिखा है - पृष्ठभूमि और अग्रभूमि होने और शीर्ष पर CSS को ओवरले करने पर, हमें निम्नलिखित "छेद" प्रभाव मिलते हैं। (यदि यह कोड चलाना दिलचस्प है, तो मैं जीथब को लिंक दे सकता हूं)।

कम उदाहरण कोड:

.punch(@punch-size: 100px, @punch-left: 0px, @punch-top: 0px, @punch-background: none, @punch-grid: false, @punch-z-index: 0) { @punch-sizeIn: @punch-size*0.86; @punch-shadowOffset: @punch-size/20; @punch-shadowSize: @punch-size/20; @punch-bgShadowOffset: @punch-size/10; @punch-bgShadowSize: @punch-size/5; left: @punch-left; top: @punch-top; box-shadow: inset 0px @punch-shadowOffset @punch-shadowSize rgba(0,0,0,0.5); z-index: @punch-z-index; .punch-shadow; .punch-white { box-shadow: inset 0px -@punch-shadowOffset @punch-shadowSize rgba(255,255,255,0.3); .punch-shadow; .punch-in { position: absolute; top: (@punch-size - @punch-sizeIn)/2; left: (@punch-size - @punch-sizeIn)/2; width: @punch-sizeIn; height: @punch-sizeIn; z-index: @punch-z-index + 1; border-radius: @punch-sizeIn/2; background: @punch-background; .punch-grid(@punch-grid); box-shadow: inset 0px @punch-bgShadowOffset @punch-bgShadowSize rgba(0,0,0,0.8); .punch-content { overflow: hidden; border-radius: @punch-sizeIn/2; max-height: @punch-sizeIn; max-width: @punch-sizeIn; } } } .punch-shadow { position: absolute; width: @punch-size; height: @punch-size; border-radius: @punch-size/2; } .punch-grid (@punch-grid) { background-position: 0 0; } /* You can fix the background to the top/left corner of your page */ /* This should create a cool effect if you have a grid of little punches (about 30px) */ .punch-grid (@punch-grid) when (@punch-grid = true) { background-position: -@punch-left -@punch-top; } }

सास के लिए कोड निम्नलिखित निकला (.scss यहाँ प्रस्तुत किया गया है, हम इसके बारे में बात करेंगे। बाद में):

 @mixin punch($punch-size: 100px, $punch-left: 0px, $punch-top: 0px, $punch-background: none, $punch-grid: false, $punch-z-index: 0) { /* Stuff you may want to change */ $punch-sizeIn: $punch-size * 0.86; $punch-shadowOffset: $punch-size / 20; $punch-shadowSize: $punch-size / 20; $punch-bgShadowOffset: $punch-size / 10; $punch-bgShadowSize: $punch-size / 5; left: $punch-left; top: $punch-top; box-shadow: inset 0px $punch-shadowOffset $punch-shadowSize rgba(0,0,0,0.5); z-index: $punch-z-index; @include punch-shadow($punch-size); .punch-white { box-shadow: inset 0px (-$punch-shadowOffset) $punch-shadowSize rgba(255,255,255,0.3); @include punch-shadow($punch-size); .punch-in { position: absolute; top: ($punch-size - $punch-sizeIn) / 2; left: ($punch-size - $punch-sizeIn) / 2; width: $punch-sizeIn; height: $punch-sizeIn; z-index: $punch-z-index + 1; border-radius: $punch-sizeIn / 2; background: $punch-background; /* You can fix the background to the top/left corner of your page */ /* This should create a cool effect if you have a grid of little punches (about 30px) */ @if $punch-grid{ background-position: (-$punch-left) (-$punch-top); } @else{ background-position: 0 0; } box-shadow: inset 0px $punch-bgShadowOffset $punch-bgShadowSize rgba(0,0,0,0.8); .punch-content { overflow: hidden; border-radius: $punch-sizeIn / 2; max-height: $punch-sizeIn; max-width: $punch-sizeIn; } } } .punch-shadow { @include punch-shadow($punch-size); } } @mixin punch-shadow($punch-size){ position: absolute; width: $punch-size; height: $punch-size; border-radius: $punch-size / 2; }

पहली पंक्ति से आप अंतर नोटिस कर सकते हैं - कम में हम सीधे सीएसएस वर्ग के साथ काम कर सकते हैं और इसके लिए तर्क दे सकते हैं:

 .punch(@punch-size: 100px, @punch-left: 0px, @punch-top: 0px, @punch-background: none, @punch-grid: false, @punch-z-index: 0)

सास में क्या संभव नहीं है

 @mixin punch($punch-size: 100px, $punch-left: 0px, $punch-top: 0px, $punch-background: none, $punch-grid: false, $punch-z-index: 0)

जहां समारोह के माध्यम से जाने के लिए

 @mixin methodName($arguments...)

मैं इस परियोजना पर एक उदाहरण दूंगा कि यह खराब / अच्छा है। पुकारना है

 @mixin($arguments...)

हमें गुजरने की जरूरत है

 @include methodName($arguments...)

जबकि कम आसान है

 .class(@arguments[])

कम

 /*    file extension .less */ @import "punches"; /*   */ body { background-image: url("foreground.jpg"); } #punch { /*  punch */ .punch(300px, 30px, 50px, url("background.jpg"), true); }

सास

 /*     .scss (         .sass     */ @import "punches.scss"; body { background-image: url("foreground.jpg"); } #punch { @include punch(300px, 30px, 50px, url("images/background.jpg"), true); }

एक अन्य बिंदु - सास में, कम की तुलना में, एक @mixin () दूसरे के अंदर नहीं हो सकता है। इसलिए, मुझे एक फंक्शन करना था ( क्योंकि फ़ंक्शन में यह कहने के बाद से फ़ंक्शन सही है (सास में) जो एक वैरिएबल लौटाता है, @mixin () नहीं करता है, लेकिन मैं फंक्शन (यहां ) ( पंच ) के बारे में बात नहीं करता हूं, जो पहले से परे है @ मिक्सिन घूंसे ()।

कम

 .punch(@punch-size: 100px){ /*  .punch-shadow  */ .punch-shadow; .punch-shadow { position: absolute; width: @punch-size; height: @punch-size; border-radius: @punch-size/2; } }

सास

 @mixin punch(){ @include punch-shadow($punch-size); } @mixin punch-shadow($punch-size){ position: absolute; width: $punch-size; height: $punch-size; border-radius: $punch-size / 2; }

2) अगला चरण, हम ध्यान देते हैं कि चर को "@" के माध्यम से कम में, "$" सास में निर्दिष्ट किया जाता है। एक तिपहिया, लेकिन फिर भी। एक और छोटा बिंदु जो मैंने देखा है कि सास में, यदि दो नंबर / चर एक के बाद एक खड़े होते हैं और दूसरे में माइनस होता है, तो कम्पास घटाव करेगा इसलिए आपको इसे कोष्ठक के साथ बंद करने की आवश्यकता है ( यह समस्या कम में नहीं है )।

कम

 background-position: -@punch-left -@punch-top;

सास

 background-position: (-$punch-left) (-$punch-top);

3) यह अन्य के लिए, लूप और सशर्त विवरण के बारे में होगा। कम में वह अनुपस्थित है जिसने मेरे दोस्त को अगली प्रविष्टि के लिए प्रेरित किया

कम

 .punch-grid (@punch-grid) { background-position: 0 0; } .punch-grid (@punch-grid) when (@punch-grid = true) { background-position: -@punch-left -@punch-top; }

मैं इसे अगली पारी खेलने में सक्षम था।
सास

 @if $punch-grid{ background-position: (-$punch-left) (-$punch-top); } @else{ background-position: 0 0; }

यह एक अच्छी तरह से ज्ञात कम समस्या है - इसमें लूप की भी कमी है, इसलिए कम पर लिखना कठिन है ( मैं ध्यान देना चाहता हूं कि सैस के लिए लूप और सरणियां इंडेक्स -1 से शुरू होती हैं, 0 नहीं )

सास

 /*   for-loop */ $authors: nick me you her; @each $author in $authors{ .author-#{$author}{ background: url(author-#{$author}.jpg); } // Sass    backlass "//",       .css. //   for-loop @for $i from 1 through 3 { .item-#{$i} { top: $i * 30px; } } //  while @while $v1 < 7{ .item-#{$v1}{ top: $v1 * 2; }

4) मैं एक नोट बनाना चाहूंगा - # {वाक्यविन्यास - मुझे यकीन नहीं है कि यह कम में है - यह आपको कोड के सीएसएस भाग में पैरामीटर भेजने की अनुमति देता है जैसा कि आप देखते हैं

 background: url(author-#{$author}.jpg);-#{$1} //  .item-#{$v1}

और इसलिए मेरा कोड 74 लाइनों में चला गया, अन्य 69। लेकिन तब सास का सबसे दिलचस्प हिस्सा दिखाई देता है - लेखन के दो तरीके हैं - एक .scss और .sass है। कम्पास में एक अंतर्निहित "सैस-कन्वर्ट" विधि है (पहले यह कम से कम एसएएस में परिवर्तित करना संभव था, लेकिन दोनों सिंटैक्स में कई बदलावों के कारण, इसे हटा दिया गया था। और इसलिए हम टर्मिनल पर जाते हैं, उस फ़ोल्डर में जाते हैं जहां हम अपने घूंसे हैं। scss) और नाम:

 ~$ sass-convert punches.scss punches.sass

.Scss और .sass के बीच का अंतर मूल रूप से वाक्यविन्यास है (लेकिन कुछ सुविधाजनक चीजें हैं)।

1)

 @mixin methodName($arguments...)

अब बस

 =methodName($arguments...)

 @include methodName($arguments...)

अब बस

 +methodName($arguments...)

3) मुख्य अंतर। Sass - कोई अंत नहीं है '' ;; लाइनों के अंत में।

सैस (.sass)

 =punch($punch-size: 100px, $punch-left: 0px, $punch-top: 0px, $punch-background: none, $punch-grid: false, $punch-z-index: 0) /* Stuff you may want to change $punch-sizeIn: $punch-size * 0.86 $punch-shadowOffset: $punch-size / 20 $punch-shadowSize: $punch-size / 20 $punch-bgShadowOffset: $punch-size / 10 $punch-bgShadowSize: $punch-size / 5 left: $punch-left top: $punch-top box-shadow: inset 0px $punch-shadowOffset $punch-shadowSize rgba(0, 0, 0, 0.5) z-index: $punch-z-index +punch-shadow($punch-size) .punch-white box-shadow: inset 0px -$punch-shadowOffset $punch-shadowSize rgba(255, 255, 255, 0.3) +punch-shadow($punch-size) }

तो क्या इससे हमें मदद मिली? मैंने LESS की तुलना में फ़ाइल आकार में 2 लाइनें और 0.1 KB जीता (मैं .scss के साथ 0.1 KB खो दिया)।

परिणाम - भविष्य लेस और सैस के लिए है, कम कोड हमेशा अच्छा होता है, लेकिन पठनीयता के बारे में मत भूलना - कोड सभी लोगों के लिए समान लिखा जाता है। सभी को शुभकामनाएँ। यदि आपके पास प्रश्न हैं या बिल्ली के नीचे कुछ गलत है।

पीएस मैं जोड़ना चाहूंगा कि कुछ हफ़्ते पहले एसेंबलिंग सैस पार्ट 2 का दूसरा भाग प्रकाशित हुआ था - यहां फोकस पर ध्यान केंद्रित किया गया है। यह भी मुफ्त है।

एक उदाहरण के साथ कोड स्कूल और उसके बाद के विश्वदृष्टि पर सैस पाठ्यक्रम (.less, .scss और .ass देखें

तो क्या इससे हमें मदद मिली? मैंने LESS की तुलना में फ़ाइल आकार में 2 लाइनें और 0.1 KB जीता (मैं .scss के साथ 0.1 KB खो दिया)।

More articles: