वैकल्पिक तर्क के साथ एक सैस मिश्रण बनाना

Question

मैं इस तरह एक मिश्रण लिख रहा हूँ:

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
    -webkit-box-shadow: $top $left $blur $color $inset;
    -moz-box-shadow: $top $left $blur $color $inset;
    box-shadow: $top $left $blur $color $inset;
}

जब मुझे कहा जाता है कि मैं वास्तव में चाहता हूं कि यदि कोई $insetमूल्य पारित नहीं होता है, तो कुछ भी आउटपुट नहीं होता है, बल्कि यह कुछ इस तरह से संकलन करता है:

-webkit-box-shadow: 2px 2px 5px #555555 "";
-moz-box-shadow: 2px 2px 5px #555555 "";
box-shadow: 2px 2px 5px #555555 "";

मैं मिक्सी को फिर से कैसे लिखूं ताकि पास होने का कोई मूल्य न $insetहो, कुछ भी आउटपुट न हो?

Comments

यह शर्म की बात है कि एस.ए.एस.एस. एक नहीं है है blankया nilमूल्य।

— जोशुआ पिंटर

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

— जोशुआ पिंटर

अब 2015 में आप सिर्फ nullattr / Prop को स्किप करने के लिए उपयोग कर सकते हैं । ie @include box-shadow($top, $left, $blur, $color, null)

— गिरावट

Answer 1

यह करने का एक DRY'r तरीका

और, आम तौर पर, उद्धरण हटाने के लिए एक साफ चाल।

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color #{$inset};
  -moz-box-shadow:    $top $left $blur $color #{$inset};
  box-shadow:         $top $left $blur $color #{$inset};
}

संस्करण 3+, आप उपयोग कर सकते हैं unquote():

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color unquote($inset);
  -moz-box-shadow:    $top $left $blur $color unquote($inset);
  box-shadow:         $top $left $blur $color unquote($inset);
} 

इसे यहाँ पर चुना गया: SASS के साथ एकल तर्क के रूप में एक सूची को एक मिश्रणकर्ता को पास करें

Comments

जैसा कि बॉब सैमर्स बताते हैं, एसएएसएस के नए संस्करण में आप उद्धरणों को हटाने के लिए # {} के बजाय unquote () विधि का भी उपयोग कर सकते हैं। चीयर्स।

— जोशुआ पिंटर

सबसे सरल तरीका nullइसके बजाय वैकल्पिक मापदंडों के डिफ़ॉल्ट मूल्य के लिए उपयोग करना है "", और वे आउटपुट में प्रदान नहीं किए जाएंगे! @mixin box-shadow($top, $left,... , $inset:null) {}

— एस। सेरपोशन

@ S.Serpooshan मैं उत्सुक हूं कि यह किस संस्करण में जोड़ा गया था। यह निश्चित रूप से 2012 में वापस समर्थित नहीं था।

— जोशुआ पिंटर

Answer 2

इतना बेहतर DRY तरीका

पास $args...करना है @mixin। इस तरह, चाहे $argsआप कितने भी पास हों। में @inputकॉल, आप सभी आर्ग की जरूरत पारित कर सकते हैं। इस तरह:

@mixin box-shadow($args...) {
  -webkit-box-shadow: $args;
  -moz-box-shadow: $args;
  box-shadow: $args;
}

और अब आप अपनी ज़रूरत के हिसाब से हर वर्ग में अपने बॉक्स-शैडो का फिर से उपयोग कर सकते हैं:

.my-box-shadow {
  @include box-shadow(2px 2px 5px #555, inset 0 0 0);
}

Comments

के अच्छे जानते हैं, लेकिन अक्सर कई बार करने के लिए है कि यह इंगित करने के लिए क्या तर्क एक और अधिक स्पष्ट है mixinउम्मीद कर रही है, जैसे $top, $left, $blur, आदि चर तर्क, आप दिखाया है की तरह, परम लचीलेपन के लिए महान हैं, हालांकि।

— जोशुआ पिंटर

धन्यवाद, यार यह मेरी बहुत मदद करता है

— नीलेश सुतार

Answer 3

सैस @ifबयानों का समर्थन करता है। ( प्रलेखन देखें ।)

आप अपने मिश्रण को इस तरह लिख सकते हैं:

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  @if $inset != "" {
    -webkit-box-shadow:$top $left $blur $color $inset;
    -moz-box-shadow:$top $left $blur $color $inset;
    box-shadow:$top $left $blur $color $inset;
  }
}

Comments

यह यहाँ उपयोगी नहीं है, केवल insetभाग को बाहर रखा जाना चाहिए जब यह शून्य है, सभी बॉक्स-छाया गुण नहीं

— S.Serpooshan

@ S.Serpooshan बस एक जोड़ें elseऔर अंदर सभी गैर इनसेट गुण शामिल हैं।

— mbomb007

@ mbomb007 मुझे पता है, मैं सिर्फ इस समाधान के साथ एक समस्या की रिपोर्ट करता हूं। और ऊपर दिए गए अन्य उत्तर बिल्कुल बेहतर हैं।

— एस। सेरपोशन

Answer 4

आप एक डिफ़ॉल्ट मान के रूप में संपत्ति को शून्य के साथ रख सकते हैं और यदि आप पैरामीटर पास नहीं करते हैं तो इसकी व्याख्या नहीं की जाएगी।

@mixin box-shadow($top, $left, $blur, $color, $inset:null) {
  -webkit-box-shadow: $top $left $blur $color $inset;
  -moz-box-shadow:    $top $left $blur $color $inset;
  box-shadow:         $top $left $blur $color $inset;
}

इसका मतलब है कि आप इस तरह शामिल बयान लिख सकते हैं।

@include box-shadow($top, $left, $blur, $color);

इस तरह लिखने के बजाय।

@include box-shadow($top, $left, $blur, $color, null);

जैसा कि यहाँ उत्तर में दिखाया गया है

Comments

यह उत्तर मौजूदा उत्तरों पर कुछ भी नया नहीं देता (देखें: stackoverflow.com/a/23565388/1652962 )

— cimmanon

@ कैमिमन इसके विपरीत, यह अतिरिक्त उपयोगिता प्रदान करता है क्योंकि आप @include box-shadow($top, $left, $blur, $color);इसके बजाय आयात लिख सकते हैं @include box-shadow($top, $left, $blur, $color, null);। इसलिए यह उत्तर बहुत अधिक है।

— दान

@ वास्तव में आप इस तरह से पठनीयता खो देते हैं, इसलिए यकीनन यह उस उत्तर से कम फायदेमंद है जो इससे प्राप्त होता है।

— टायलरएच

@ टायलरएच यह सच है

— डैन

Answer 5

पुराना प्रश्न, मुझे पता है, लेकिन मुझे लगता है कि यह अभी भी प्रासंगिक है। यकीनन, ऐसा करने का एक स्पष्ट तरीका है unquote () फ़ंक्शन (जो SASS के संस्करण 0.0.0 के बाद से है) का उपयोग करना है:

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color unquote($inset);
  -moz-box-shadow: $top $left $blur $color unquote($inset);
  box-shadow: $top $left $blur $color unquote($inset);
}

यह लगभग जोश के जवाब के बराबर है, लेकिन मुझे लगता है कि स्पष्ट रूप से नामित फ़ंक्शन स्ट्रिंग इंटरपोलर सिंटैक्स की तुलना में कम obfuscated है।

Answer 6

मुझे पता है कि इसका ठीक-ठीक उत्तर नहीं है जिसे आप खोज रहे थे लेकिन आप "null"अंतिम तर्क के रूप में पास कर सकते हैं जब @include box-shadowमिक्सिन, इस तरह @include box-shadow(12px, 14px, 2px, green, null);, अब, यदि यह तर्क उस संपत्ति में से केवल एक ही संपत्ति (और इसका (डिफ़ॉल्ट) मान) संकलित नहीं होगा । यदि उस "लाइन" पर दो या दो से अधिक आर्ग्स हैं, जिन्हें आपने nulled किया है, तो आपको (आपका मामला) संकलित नहीं किया जाएगा।

CSS आउटपुट बिल्कुल वैसा ही है जैसा आप चाहते थे, लेकिन आपको अपना nulls लिखना है :)

  @include box-shadow(12px, 14px, 2px, green, null);

  // compiles to ...

  -webkit-box-shadow: 12px 14px 2px green;  
  -moz-box-shadow: 12px 14px 2px green;  
  box-shadow: 12px 14px 2px green;

Comments

निश्चित रूप से ऐसा करने का मेरा पसंदीदा तरीका यह है कि जब आप किसी पटकथा पर वापस आना चाहते हैं तो पढ़ने और समझने के लिए सब कुछ सरल रखें। थेनक्स ड्रॉप्स।

— प्लेटेंबिनरी

Answer 7

यहाँ नीचे दिए गए नोटों के साथ, मैं इसका उपयोग कर रहा हूं

@mixin transition($trans...) {
  @if length($trans) < 1 {
    $trans: all .15s ease-out;
  }
  -moz-transition: $trans;
  -ms-transition: $trans;
  -webkit-transition: $trans;
  transition: $trans;
}

.use-this {
  @include transition;
}

.use-this-2 {
  @include transition(all 1s ease-out, color 2s ease-in);
}

• "जीभ" के करीब रहने के लिए देशी सीएसएस के रूप में संपत्ति मूल्यों को पारित करना पसंद करें
• तर्क की चर संख्या को पारित करने की अनुमति दें
• आलस्य के लिए एक डिफ़ॉल्ट मूल्य निर्धारित करें

Comments

यह मौजूदा उत्तरों (अर्थात्: stackoverflow.com/a/28072864/1652962 ) पर कुछ भी कैसे जोड़ता है ?

— cimmanon

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

— तेतरादेव

कभी-कभी, आप एक वैश्विक व्यवहार को परिभाषित करना चाहते हैं। उदाहरण के लिए, एनीमेशन संक्रमण जहां आप आम तौर पर एक समान अनुभव चाहते हैं और "रचनात्मक डेवलपर विवेक" को जोखिम में डालना नहीं चाहते हैं जब यह तय करना है कि क्या करना है। यह एक डिफ़ॉल्ट को परिभाषित करता है जिसे ओवरराइड किया जा सकता है लेकिन अक्सर तर्क पारित नहीं होने पर अधिक कॉम्पैक्ट सिंटैक्स के कारण नहीं होगा। आप इस तरह से एक ही स्थान पर वैश्विक व्यवहार को भी बदल सकते हैं।

— दुग्गी

Answer 8

Sass@3.4.9 के साथ:

// declare
@mixin button( $bgcolor:blue ){
    background:$bgcolor;
}

और मूल्य के बिना उपयोग करें, बटन नीला होगा

//use
.my_button{
    @include button();
}

और मूल्य के साथ, बटन लाल होगा

//use
.my_button{
    @include button( red );
}

हेक्सा के साथ भी काम करता है

Comments

यह मौजूदा उत्तरों पर कुछ कैसे जोड़ता है?

— साइमन

Answer 9

यहां तक ​​कि रास्ता!

@mixin box-shadow($args...) {
  @each $pre in -webkit-, -moz-, -ms-, -o- {
    #{$pre + box-shadow}: $args;
  } 
  #{box-shadow}: #{$args};
}

और अब आप अपने बॉक्स-शैडो को फिर से स्मार्ट तरीके से उपयोग कर सकते हैं:

.myShadow {
  @include box-shadow(2px 2px 5px #555, inset 0 0 0);
}

Comments

बस एक नोट - जैसा कि यह पठनीय है और मैं स्वीकार करता हूं कि, यह वह जगह है जहां एक को DRY कोड और पठनीयता / रखरखाव के बीच की रेखा खींचनी चाहिए ।

— लियो नेपोलियन

मैं सहमत हूं, पठनीयता / स्थिरता बढ़ाने के लिए मैं अन्य मिश्रणों में पुन: उपयोग करने के लिए "ब्राउज़र सूची" बनाऊंगा। यह बहुत आसान भी अन्य सीएसएस गुणों के लिए इकट्ठा किया जा सकता है, जिसे सूखे मिश्रण के एक सेट के साथ निष्पादित किया जा सकता है। 2014 का यह लेख अभी भी महान उदाहरण है।

— बेन कालस्की

Answer 10

@mixin box-shadow($left: 0, $top: 0, $blur: 6px, $color: hsla(0,0%,0%,0.25), $inset: false) {
    @if $inset {
        -webkit-box-shadow: inset $left $top $blur $color;
        -moz-box-shadow: inset $left $top $blur $color;
        box-shadow: inset $left $top $blur $color;
    } @else {
        -webkit-box-shadow: $left $top $blur $color;
        -moz-box-shadow: $left $top $blur $color;
        box-shadow: $left $top $blur $color;
    }
}

Comments

यकीनन यह अन्य सभी जवाबों से बदतर है, इसकी वाचालता के कारण। इसके अलावा, दुसरे उत्तरों में से एक के रूप में इसका पर्याप्त पास एक डुप्लिकेट के रूप में गिनने के लिए।

— साइमन

Answer 11

सुपर सरल तरीका है

बस none$ इनसेट का डिफ़ॉल्ट मान जोड़ें - तो

@mixin box-shadow($top, $left, $blur, $color, $inset: none) { ....

अब जब कोई $ इनसेट पास नहीं होगा तो कुछ भी प्रदर्शित नहीं किया जाएगा।

Answer 12

आप हमेशा अपने वैकल्पिक तर्कों को शून्य प्रदान कर सकते हैं। यहाँ एक आसान तय है

@mixin box-shadow($top, $left, $blur, $color, $inset:null) { //assigning null to inset value makes it optional
    -webkit-box-shadow: $top $left $blur $color $inset;
    -moz-box-shadow: $top $left $blur $color $inset;
    box-shadow: $top $left $blur $color $inset;
}

Answer 13

मैं सीएसएस संकलक के लिए नया हूँ, आशा है कि यह मदद करता है,

        @mixin positionStyle($params...){

            $temp:nth($params,1);
            @if $temp != null{
            position:$temp;
            }

             $temp:nth($params,2);
            @if $temp != null{
            top:$temp;
            }

             $temp:nth($params,3);
            @if $temp != null{
            right:$temp;
            }

             $temp:nth($params,4);
            @if $temp != null{
            bottom:$temp;
            }

            $temp:nth($params,5);
            @if $temp != null{
            left:$temp;
            }

    .someClass{
    @include positionStyle(absolute,30px,5px,null,null);
    }

//output

.someClass{
position:absolute;
 top: 30px;
 right: 5px;
}

Comments

यह मौजूदा उत्तरों पर कुछ कैसे जोड़ता है?

— cimmanon