我写的mixin是这样的:

@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 "";

我如何重写mixin,以便如果没有$inset传递的值,没有输出?


当前回答

超级简单的方法

只需添加一个默认值none到$inset - so

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

现在,当没有$inset被传递时,什么也不会显示。

其他回答

我是新的css编译器,希望这有助于,

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

我知道这不是你正在寻找的答案,但你可以通过“null”作为@include box-shadow mixin的最后一个参数,就像这个@include box-shadow(12px, 14px, 2px,绿色,null);现在,如果该参数在该属性中仅为1,那么该属性(及其(默认)值)将不会被编译。如果在“行”上有两个或更多的参数,只有你为空的参数不会被编译(你的情况)。

CSS输出完全是你想要的,但你必须写你的null:)

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

以下是我使用的解决方案,附注如下:

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

更喜欢将属性值作为原生CSS传递,以接近“舌头” 允许传递可变数量的参数 为惰性定义一个默认值

sass@3.4.9:

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

而使用时没有价值,按钮会呈蓝色

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

带有value, button会是红色的

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

对六烷也有效

您可以将null属性作为默认值,如果您不传递该参数,它将不会被解释。

@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语句。

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

而不是这样写。

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

如答案所示