sam @mixin可以接受未定义数量的参数吗？

Question

我正在尝试为过渡创建一个sass mixin.这就是我到目前为止所拥有的.

@mixin transition($var)
  -webkit-transition: $var
  transition: $var

我希望能够像这样传递多个参数

@include transition(color .5s linear, width .5s linear)

不幸的是,我收到以下错误

Syntax error: Mixin transition takes 1 argument but 2 were passed.

有没有办法这样做,所以它在css中产生以下输出,同时仍然接受一个未定义数量的参数？

-webkit-transition: color .5s linear, width .5s linear;
transition: color .5s linear, width .5s linear;

Answer 1

变量参数

有时候,mixin采用未知数量的参数是有意义的.例如,用于创建框阴影的mixin可能会将任意数量的阴影作为参数.对于这些情况,Sass支持"变量参数",它是mixin声明末尾的参数,它接受所有剩余的参数并将它们打包为列表.这些参数看起来就像普通参数一样,但后面跟着....例如:

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

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译为:

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

来自:SASS官方文档

所以你基本上只需要改变你的mixins声明,如下所示:

@mixin transition($var...)
  -webkit-transition: $var
  transition: $var

Answer 2

当你调用mixin时,请像这样调用它:

@include transition( (color .5s linear, width .5s linear) );

额外的parens.这将使您想要将其用作单个参数.

编辑:如果使用Sass 3.2或更高版本,请参阅Jeremie Parker上面的答案.Real变量参数在3.2中添加:http://chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released