SCSS mixin中if / else条件的语法


106

嗨,我正在尝试学习SASS / SCSS,并试图为clearfix重构我自己的mixin

我想要的是mixin基于我是否将mixin传递为宽度。

到目前为止的想法(仅伪代码,因为我将包括其他mixins)

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

我将以最好或正确的方式为您提供帮助!


3
请查看Ryan James的答案-比目前接受的答案好得多。=)
Quinn Strahl

Answers:


145

您可以尝试以下方法:

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

   @if $width == 'auto' {

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

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

我不确定您的预期结果,但设置默认值应返回false。


5
的确如此,谢谢您使用它," "但是我更喜欢auto值:)-尽管我将其作为默认值添加到mixin语法中,但不需要设置变量@mixin clearfix($width: auto) {... :)
clairesuzy 2011年

给$ width:auto有什么目的?作为默认值?
Krish

222

首次创建混合时,可以内联分配默认参数值:

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

23
这应该是公认的答案!使用默认参数更好/更清洁。
图形方式

@hellaFont:请不要添加无效的编辑。添加代码或对其进行更改将改变答案的含义。评论就足够了。
布莱恩(Brian)

9

您可以将参数默认设置为nullfalse
这样,测试值是否已作为参数传递将更短。

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

投票最少的最合乎逻辑的答案...世界是不合逻辑的。
CPHPython
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.