सास में @include बनाम @extend का उपयोग कर?

Question

सास में, मैं एक मिश्रण के साथ @include का उपयोग करने और प्लेसहोल्डर वर्ग के साथ @extend का उपयोग करने के बीच अंतर को बिल्कुल समझ नहीं सकता। क्या वे एक ही चीज़ की मात्रा नहीं है?

Answer 1

विस्तारित करने की अनुमति नहीं देता है, लेकिन वे बहुत ही कुशल सीएसएस उत्पन्न करते हैं।

%button 
    background-color: lightgrey 
    &:hover, &:active 
    background-color: white 

a 
    @extend %button 

button 
    @extend %button 

परिणाम:

a, button { 
    background-color: lightgrey; 
} 
a:hover, button:hover, a:active, button:active { 
    background-color: white; 
} 

mixins के साथ, आप सीएसएस दोहराया गया हो, लेकिन आप प्रत्येक उपयोग के लिए परिणाम संशोधित करने के लिए तर्कों का उपयोग कर सकते हैं।

=button($main-color: lightgrey, $active-color: white) 
    background-color: $main-color 
    border: 1px solid black 
    border-radius: 0.2em 

    &:hover, &:active 
    background-color: $active-color 

a 
    +button 

button 
    +button(pink, red) 

परिणाम में:

a { 
    background-color: lightgrey; 
    border: 1px solid black; 
    border-radius: 0.2em; 
} 
a:hover, a:active { 
    background-color: white; 
} 

button { 
    background-color: pink; 
    border: 1px solid black; 
    border-radius: 0.2em; 
} 
button:hover, button:active { 
    background-color: red; 
} 

कोड उदाहरण के इस लगातार सेट का पालन करें देखने के लिए का उपयोग करके कैसे आप अपने कोड क्लीनर और अधिक maintainable कर सकते हैं प्रदान करता है और mixins प्रभावी ढंग से: http://thecodingdesigner.com/journal/balancing-ideal-sass-and-ideal-css

नोट दुर्भाग्यवश SASS मीडिया क्वेरी के अंदर विस्तार का उपयोग करने की अनुमति नहीं देता है (और उपरोक्त लिंक से संबंधित उदाहरण गलत है)। स्थिति है जहाँ आप मीडिया पर आधारित प्रश्नों का विस्तार करने की जरूरत है, एक mixin का उपयोग करें:

=active 
    display: block 
    background-color: pink 

%active 
    +active 

#main-menu 
    @extend %active // Active by default 

#secondary-menu 
    @media (min-width: 20em) 
    +active // Active only on wide screens 

परिणाम:

#main-menu { 
    display: block; 
    background-color: pink; 
} 

@media (min-width: 20em) { 
    #secondary-menu { 
    display: block; 
    background-color: pink; 
    } 
} 

दोहराव इस मामले में अपरिहार्य है, लेकिन आप इसके बारे में बहुत ज्यादा परवाह नहीं करना चाहिए क्योंकि वेब सर्वर का gzip संपीड़न इसका ख्याल रखेगा।

पीएस ध्यान दें कि आप मीडिया प्रश्नों के भीतर प्लेसहोल्डर कक्षाएं घोषित कर सकते हैं।

अद्यतन 2014-12-28: का विस्तार अधिक कॉम्पैक्ट सीएसएस से mixins कर उत्पादन है, लेकिन जब सीएसएस gzipped है इस लाभ कम है। यदि आपका सर्वर gzipped सीएसएस परोसता है (यह वास्तव में चाहिए!), तो बढ़ाता है आपको लगभग कोई लाभ नहीं देता है। तो आप हमेशा मिक्सिन का उपयोग कर सकते हैं! यहां पर अधिक: http://www.sitepoint.com/sass-extend-nobody-told-you/

Answer 2

एक अच्छा दृष्टिकोण दोनों का उपयोग करना है - एक मिश्रण बनाएं जो आपको बहुत अनुकूलन की अनुमति देगा और फिर उस मिश्रण के सामान्य कॉन्फ़िगरेशन के लिए विस्तारित करेगा। उदाहरण (एससीएसएस सिंटेक्स) के लिए:

@mixin my-button($size: 15, $color: red) { 
    @include inline-block; 
    @include border-radius(5px); 
    font-size: $size + px; 
    background-color: $color; 
} 
%button { 
    @include my-button; 
} 
%alt-button { 
    @include my-button(15, green); 
} 
%big-button { 
    @include my-button(25); 
} 

यह अधिक से अधिक मेरे बटन mixin बुला से बचाता है। इसका मतलब यह भी है कि आपको सामान्य बटनों के लिए सेटिंग्स को याद रखने की आवश्यकता नहीं है, लेकिन आपके पास अभी भी एक सुपर अनन्य, एक-ऑफ बटन चुनने की क्षमता है जिसे आप चुनना चाहिए।

मैं इस उदाहरण को a blog post I wrote से बहुत पहले नहीं लेता हूं। उम्मीद है की यह मदद करेगा।

Answer 3

मिश्रणों का उपयोग करें यदि यह पैरामीटर स्वीकार करता है, जहां संकलित आउटपुट आपके द्वारा पारित होने के आधार पर बदल जाएगा।

@include opacity(0.1); 

उपयोग शैलियों में से किसी स्थिर repeatable ब्लॉकों के लिए (प्लेसहोल्डर के साथ) का विस्तार।

color: blue; 
font-weight: bold; 
font-size: 2em; 

Answer 4

मेरी राय में शुद्ध बुराई है और इससे बचा जाना चाहिए। यहाँ कारण है कि:

एससीएसएस दिया:

%mystyle {color: blue;} 
.mystyle-class {@extend %mystyle} 
//basically anything not understood by target browser (such as :last-child in IE8): 
::-webkit-input-placeholder {@extend %mystyle} 

निम्नलिखित सीएसएस उत्पन्न हो जाएगा:

.mystyle-class, ::-webkit-input-placeholder { //invalid in non-webkit browsers 
    color: blue; 
} 

एक ब्राउज़र एक चयनकर्ता को नहीं समझता है, यह चयनकर्ताओं की पूरी लाइन को अमान्य कर । इसका मतलब है कि आपकी बहुमूल्य रहस्य-शैली अब नीली नहीं है (कई ब्राउज़रों के लिए)। इसका वास्तव में क्या अर्थ है? यदि आप किसी भी समय विस्तार का उपयोग करते हैं जहां ब्राउज़र चयनकर्ता को समझ नहीं सकता है तो विस्तार के हर दूसरे उपयोग को अमान्य कर दिया जाएगा। यह व्यवहार भी बुराई घोंसले के लिए अनुमति देता है:

%mystyle {color: blue;} 
@mixin mystyle-mixin {@extend %mystyle; height: 0;} 
::-webkit-input-placeholder {@include mystyle-mixin} 
//you thought nesting in a mixin would make it safe? 
.mystyle-class {@extend %mystyle;} 

परिणाम:

::-webkit-input-placeholder, .mystyle-class { //invalid in non-webkit browsers 
    color: blue; 
} 

::-webkit-input-placeholder { 
    height: 0; 
} 

Tl, डॉ: @extend जब तक आप किसी भी ब्राउज़र spesific चयनकर्ताओं के साथ इसका इस्तेमाल कभी नहीं के रूप में के लिए पूरी तरह ठीक है। यदि आप करते हैं, तो अचानक आप शैलियों को फाड़ देंगे जहां आपने इसका इस्तेमाल किया है। इसके बजाय mixins पर भरोसा करने की कोशिश करो!