एससीएसएस मिक्सिन में अगर / और कोई शर्त है तो सिंटैक्स

Question

नमस्ते, मैं SASS / SCSS सीखने की कोशिश कर रहा हूं और क्लीयरफिक्स के लिए अपने स्वयं के मिश्रण को रिफैक्ट करने की कोशिश कर रहा हूं

मैं मिक्सिन के लिए जो चाहूंगा, वह इस आधार पर होगा कि क्या मैं मिक्सिन की चौड़ाई पास करूं।

अब तक के विचार (छद्म कोड जैसा कि मैं अन्य मिश्रणों सहित होगा)

@mixin clearfix($width) {

   @if !$width {

    // if width is not passed, or empty do this

   } @else {

        display: inline-block;
        width: $width;
   }
}

यहां मैंने सोचा कि मैं इसे कैसे कह सकता हूं, लेकिन यह काम नहीं कर रहा है।

@include clearfix();

या

@include clearfix(100%)

या

@include clearfix(960px)

मैं यह करने के लिए सबसे अच्छा या सही तरीके से किसी भी मदद की सराहना करता हूँ!

Comments

कृपया रयान जेम्स का जवाब देखें - यह वर्तमान में स्वीकृत एक की तुलना में बहुत बेहतर है। =)

— क्विन स्ट्राहल

Answer 1

आप यह कोशिश कर सकते हैं:

$width:auto;
@mixin clearfix($width) {

   @if $width == 'auto' {

    // if width is not passed, or empty do this

   } @else {
        display: inline-block;
        width: $width;
   }
}

मुझे आपके इच्छित परिणाम का यकीन नहीं है, लेकिन एक डिफ़ॉल्ट मान सेट करना गलत होना चाहिए।

Comments

यह करता है, धन्यवाद कि मैंने इसका उपयोग किया था, " "लेकिन मुझे ऑटो मूल्य बेहतर पसंद है :) - मुझे चर सेट करने की आवश्यकता नहीं थी, हालांकि मैंने इसे मिक्सिन सिंटैक्स में डाल दिया क्योंकि डिफ़ॉल्ट vaue @mixin clearfix($width: auto) {... धन्यवाद :)

— clairesuzy

$ चौड़ाई देने का कोई उद्देश्य है: ऑटो; डिफ़ॉल्ट मान के रूप में?

— कृष

Answer 2

जब आप पहली बार मिक्सर बनाते हैं तो आप डिफ़ॉल्ट पैरामीटर मान इनलाइन असाइन कर सकते हैं:

@mixin clearfix($width: 'auto') {

  @if $width == 'auto' {

    // if width is not passed, or empty do this

  } @else {

    display: inline-block;
    width: $width;

  }
}

Comments

यह स्वीकृत उत्तर होना चाहिए! डिफ़ॉल्ट पैरामीटर का उपयोग करना बेहतर / क्लीनर है।

— विचारशील

@hellaFont: कृपया अमान्य संपादन न जोड़ें। कोड जोड़ने या इसे बदलने से उत्तर का अर्थ बदल जाएगा। एक टिप्पणी पर्याप्त होगी।

— ब्रायन

Answer 3

आप पैरामीटर को डिफ़ॉल्ट कर सकते हैं null या false।
इस तरह, यह परीक्षण करने के लिए कम होगा कि क्या मान को पैरामीटर के रूप में पारित किया गया है।

@mixin clearfix($width: null) {

  @if not ($width) {

    // if width is not passed, or empty do this

  } @else {

    display: inline-block;
    width: $width;

  }
}

Comments

सबसे कम जवाब के साथ सबसे तार्किक जवाब ... दुनिया अतार्किक है।

— CPHPython