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

Question

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

Comments

इसमें आपको आधार वर्ग का विस्तार नहीं दिया गया है, यह सिर्फ विकल्प जोड़ता है। बस आपको सलाह है कि आप sass-lang.com/docs/yardoc/… और sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend

— CodeGroover

इसके अलावा, @CodeGroover, जो भी एक उपयोगी टिप्पणी नहीं है, हो सकता है कि आपने सवाल गलत समझा हो। पढ़ना यह अधिक उपयोगी जानकारी देता है: gist.github.com/antsa/970172

— temporary_user_name

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

— अभिजीत

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;
}

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

=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;
}

कृपया कोड उदाहरणों के इस लगातार सेट का पालन करें कि कैसे आप प्रभावी तरीके से मिश्रणों और मिश्रणों का उपयोग करके अपने कोड को क्लीनर और अधिक बनाए रख सकते हैं: http://thecodingdesigner.com/posts/balancing

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

=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 संपीड़न इसका ध्यान रखेगी।

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

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

Comments

मुझे नहीं लगता कि यह पूरी तरह से सही है ... आप @extendsएक्सटेंशन माता-पिता को ओवरराइड करके अनुकूलित कर सकते हैं । बेशक आप तर्कों में पास नहीं हो सकते, लेकिन फिर क्या यह एकमात्र अंतर है? उस मामले में, क्या @extendसिर्फ @mixinतर्क के बिना? मुझे अभी भी फायदा या फर्क नहीं दिख रहा है।

— temporary_user_name

यहाँ कुछ अन्य quirks हैं ... stackoverflow.com/questions/30744625/…

— टोनी लेह

मैं पिछले पैराग्राफ के "आपको लगभग कोई लाभ नहीं देता" पहलू की व्याख्या करने में सावधान रहूंगा। Gzip सम्पीडन एक शब्दकोश-आधारित हफ़मैन कोडर है, इसलिए यदि दोहराव काफी दूर तक होता है, तो पाठ शब्दकोश में मौजूद नहीं होगा और संपीड़न अनुपात को नुकसान होगा। मैं अभी भी हमेशा @extendजहां संभव हो पसंद करता हूं , क्योंकि यह अधिक कॉम्पैक्ट सीएसएस का उत्पादन करेगा , जो अभी भी काफी अच्छी तरह से संपीड़ित करेगा (यह एएससीआईआई पाठ है, आखिरकार)।

— रात्रि

@amcgregor, अंतर नगण्य है।

— एंड्री मिखायलोव - lolmaus

@ AndreyMikhaylov-lolmaus मैं सहमत हूँ! मुझे उम्मीद है कि तार पर अनिवार्य रूप से असहनीय होने की संभावना होगी, चाहे मेगाबाइट के लिए कुछ भी पसंद हो या उत्पन्न सीएसएस से, इस तथ्य के अलावा कि स्मृति में असम्पीडित अंतिम परिणाम का उपयोग करके अधिक कॉम्पैक्ट होगा @extend। यह एक सूक्ष्म-अनुकूलन प्रतीत होता है जो अंतर्ज्ञान और आंत की भावनाओं पर आधारित होता है, बजाय यह समझने के कि संपीड़न योजना वास्तव में कैसे काम करती है। (इसके अलावा, यह ऑन-डिमांड gzip ट्रांसफर-एन्कोडिंग के काफी ओवरहेड को नजरअंदाज करता है; संपीड़न मुक्त नहीं है!)

— amcgregor

Answer 2

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

@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);
}

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

मैं इस उदाहरण को एक ब्लॉग पोस्ट से लेता हूं जो मैंने बहुत पहले नहीं लिखा था। उम्मीद है की यह मदद करेगा।

Answer 3

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

scss दिया:

%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; dr: @extend पूरी तरह से तब तक के लिए ठीक है जब तक आप इसे किसी भी ब्राउज़र के चयनकर्ताओं के साथ प्रयोग नहीं करते। यदि आप करते हैं, तो यह उन शैलियों को अचानक फाड़ देगा जहां आपने इसका उपयोग किया है। बजाय मिश्रणों पर भरोसा करने की कोशिश करो!

Comments

दिलचस्प नोट

— simhumileco

Answer 4

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

@include opacity(0.1);

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

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

Answer 5

मैं d4nyll द्वारा पिछले उत्तर से पूरी तरह सहमत हूं। विस्तार विकल्प के बारे में एक पाठ है और जब मैं इस विषय पर शोध कर रहा था तो मुझे विस्तार के बारे में बहुत सारी शिकायतें मिलीं, इसलिए बस इस बात का ध्यान रखें कि और अगर विस्तार के बजाय मिक्सिन का उपयोग करने की संभावना है, तो बस विस्तार को छोड़ दें।