sass
mixins

वाक्य - विन्यास

• @mixin mixin-name ($argument1, $argument, ...){ ... }

एक मिक्सिन बनाएं और उपयोग करें

एक मिश्रण बनाने के लिए @mixin निर्देश का उपयोग करें।

@mixin default-box ($color, $borderColor) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

आप मिश्रण के नाम के बाद एक कोष्ठक के अंदर तर्कों की एक सूची निर्दिष्ट कर सकते हैं। $ साथ अपने चर को शुरू करना और उन्हें अल्पविराम से अलग करना याद रखें।

किसी अन्य चयनकर्ता में मिश्रण का उपयोग करने के लिए, @include निर्देश का उपयोग करें।

footer, header{ @include default-box (#ddd, #ccc); }

Mixin से शैलियों अब में उपयोग किया जाएगा footer और header मूल्य के साथ, #ccc के लिए $color चर और #ddd के लिए $borderColor चर।

चर तर्क के साथ मिक्स

मिश्रणों में कुछ मामले हैं जहां इसका उपयोग करते समय एकल या एकाधिक तर्क हो सकते हैं। चलो border-radius का एक मामला लेते हैं जहां border-radius:4px; जैसे एकल तर्क हो सकते हैं border-radius:4px; या border-radius:4px 3px 2px 1px; जैसे कई तर्क border-radius:4px 3px 2px 1px; ।

कीवर्ड तर्क मिश्रण के साथ पारंपरिक नीचे की तरह होगा: -

@mixin radius($rad1, $rad2, $rad3, $rad4){
 -webkit-border-radius: $rad1 $rad2 $rad3 $rad4;
 -moz-border-radius: $rad1 $rad2 $rad3 $rad4;
 -ms-border-radius: $rad1 $rad2 $rad3 $rad4;
 -o-border-radius: $rad1 $rad2 $rad3 $rad4;
 border-radius: $rad1 $rad2 $rad3 $rad4;
}

और के रूप में इस्तेमाल किया

.foo{
    @include radius(2px, 3px, 5px, 6px)
}

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

चर तर्क का उपयोग करके आपको इस बारे में चिंता करने की ज़रूरत नहीं है कि आप कितने तर्क पारित कर सकते हैं। परिवर्तनीय तर्कों को तीन डॉट्स (...) के बाद एक चर नाम को परिभाषित करके घोषित किया जा सकता है। निम्नलिखित एक चर तर्क का एक उदाहरण है।

@mixin radius($radius...)
{  
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

और के रूप में इस्तेमाल किया

.foo{
    @include radius(2px 3px 5px 6px)
}
.foo2{
    @include radius(2px 3px)
}
.foo3{
    @include radius(2px)
}

उपरोक्त उदाहरण बहुत सरल है (कोड को बनाए रखने और पढ़ने के लिए), आपको इस बारे में चिंता करने की ज़रूरत नहीं है कि कितने तर्क आने वाले हैं - क्या यह एक या एक से अधिक है ।

यदि एक से अधिक तर्क हैं और किसी भी मामले में आप दूसरे तर्क का उपयोग करना चाहते हैं, तो आप इसे propertyname : nth(variable_name, 2) नाम लिखकर कर सकते propertyname : nth(variable_name, 2) ।

संवेदनशील चूक

SASS आपको किसी भी पैरामीटर को छोड़ने की क्षमता देता है, सिवाय इसके कि आप निश्चित रूप से ओवरराइट करना चाहते हैं। चलिए फिर से default-box उदाहरण लेते हैं:

@mixin default-box ($color: red, $borderColor: blue) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

अब हम दूसरे पैरामीटर को अधिलेखित करने वाले मिक्सर को कॉल करेंगे

footer, header{ @include default-box ($borderColor: #ccc); }

$borderColor #ccc का मूल्य #ccc , जबकि $color red रहता है

वैकल्पिक तर्क

SASS की वैकल्पिक दलीलें आपको केवल एक पैरामीटर का उपयोग करने देती हैं यदि आप इसका मान निर्दिष्ट करते हैं; अन्यथा, इसे नजरअंदाज कर दिया जाएगा। आइए निम्नलिखित मिश्रण का एक उदाहरण लेते हैं:

@mixin galerie-thumbnail ($img-height:14em, $img-width: null) {
    width: $img-width;
    height: $img-height;
    outline: 1px solid lightgray;
    outline-offset: 5px;
}

तो एक कॉल करने के लिए

.default { 
  @include galerie-thumbnail; 
}
.with-width { 
  @include galerie-thumbnail($img-width: 12em);
}
.without-height { 
  @include galerie-thumbnail($img-height: null);
}

बस सीएसएस फ़ाइल में निम्नलिखित उत्पादन होगा:

.default {
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.with-width {
  width: 12em;
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.without-height {
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

SASS अपने मान के रूप में null साथ गुणों का उत्पादन नहीं करता है, जो तब बहुत मददगार होता है जब हमें अपने कॉल में एक वैकल्पिक तर्क को शामिल करने की आवश्यकता होती है या नहीं।

@ महाद्वीप निर्देशन

मिक्सिन्स को SASS कंप्लेंट कोड का एक ब्लॉक दिया जा सकता है, जो फिर मिश्रण के भीतर @content रूप में उपलब्ध हो जाता है।

@mixin small-screen {
  @media screen and (min-width: 800px;) {
    @content;
  }
}

@include small-screen {
  .container {
    width: 600px;
  }
}

और यह उत्पादन होगा:

  @media screen and (min-width: 800px;) {
    .container {
      width: 600px;
    }
  }

मिक्सिंस @ @content निर्देश का उपयोग कर सकते हैं और अभी भी मापदंडों को स्वीकार कर सकते हैं।

@mixin small-screen($offset) {...