@ कपड़ा वेंडर उर्फ मिक्सटेंड - सीएसएस-ट्रिक्स

@extendनिर्देश के साथ एक चयनकर्ता का विस्तार करते समय , Sass विस्तारित चयनकर्ता से सीएसएस सामग्री को विस्तार देने वाले स्थान पर नहीं रखता है। यह दूसरे तरीके से काम करता है। यह विस्तारित चयनकर्ता लेता है और इसे विस्तारित के लिए जोड़ता है।

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

निश्चित रूप से हम @extendजब संभव हो, मिश्रण का उपयोग करने का एक तरीका पा सकते हैं अन्यथा। वास्तव में, यह उल्लेखनीय है लेकिन यह थोड़ा मुश्किल है, मैं इसे मिक्सटेंड हैक कहता हूं। आप अपनी परियोजना में हर जगह लागू करने से पहले दो बार सोचना चाह सकते हैं। शायद मिश्रण का उपयोग करना केवल आसान होगा। मैं तुम्हें उस के न्यायाधीश छोड़ दूँगा।

रैपिंग `@extend`

विचार वास्तव में काबू करने के लिए काफी सरल है। सबसे पहले हम मिश्रण को परिभाषित करते हैं। एकमात्र पैरामीटर है $extend, जो परिभाषित करता है कि मिश्रण को शामिल करने के बजाय मिश्रण को विस्तारित करने की कोशिश करनी चाहिए या नहीं। जाहिर है, यह एक बूलियन (डिफ़ॉल्ट true) है।

अगर $extendहै true, तो हम mixin (दुर्भाग्य से, यह स्वतः गणना नहीं की जाती है) के नाम पर एक प्लेसहोल्डर का विस्तार। यदि यह है false, तो हम सीएसएस कोड को डंप करते हैं क्योंकि एक नियमित मिश्रण होता है।

मिक्सिन में से, हम उपर्युक्त प्लेसहोल्डर को परिभाषित करते हैं। प्लेसहोल्डर में सीएसएस कोड को दोहराने से बचने के लिए, हमें केवल मिक्सिन को सेटिंग में शामिल $extendकरना होगा falseताकि यह सीएसएस कोड को प्लेसहोल्डर के कोर में डंप कर दे।

/// *Mixtend* hack /// @author Hugo Giraudel @mixin mixtend-boilerplate($extend: true) ( @if $extend ( @extend %mixtend-boilerplate-placeholder; ) @else ( // Mixtend content ) ) %mixtend-boilerplate-placeholder ( @include mixtend-boilerplate($extend: false); )

उदाहरण

एक सरल उदाहरण के रूप में, हम निकोलस गैलाघेर से सूक्ष्म-उपसर्ग का उपयोग करेंगे।

@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )

इसका उपयोग करना काफी सरल है:

.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )

परिणाम सीएसएस:

.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )

उदात्त पाठ स्निपेट

यदि आप इसे अत्यधिक पुन: उपयोग करने के लिए बॉयलरप्लेट को बचाना चाहते हैं, तो आपको यह जानकर प्रसन्नता होगी कि इसके लिए एक उदात्त पाठ स्निपेट बनाना बहुत आसान है। उदात्त में, टूल्स> न्यू स्निपेट ... पर जाएं और नीचे दी गई सामग्री पेस्ट करें।

जो कुछ भी आपकी नाव को तैराने के लिए महत्वपूर्ण है उसे बदलने के लिए स्वतंत्र महसूस करें ; यह tabस्निपेट का विस्तार करने के लिए मारने से पहले टाइप करने के लिए शब्द है । मैं साथ गया mixtend।