干的方式好多了

是传递$args…到@mixin。 这样，不管你传递多少个$args。 在@input调用中，你可以传递所有需要的参数。 像这样:

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

现在你可以通过传递所有需要的参数在每个类中重用你的box-shadow:

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

超级简单的方法

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

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

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

我知道这不是你正在寻找的答案，但你可以通过“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;

Sass支持@if语句。(请参考文档)

你可以这样写你的mixin:

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

sass@3.4.9:

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

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

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

带有value, button会是红色的

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

对六烷也有效

干的方法

一般来说，一个简单的技巧就是去掉引号。

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

SASS版本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的单个参数传递给mixin