sass @mixin可以接受一个未定义数量的参数吗?

我正在尝试为转换创build一个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; 

variables参数

有时mixin采取未知数量的参数是有意义的。 例如,用于创build方框阴影的混合可能会将任意数量的阴影作为参数。 对于这些情况,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 

当你打电话给mixin时,请这样调用它:

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

随着额外的parens。 这将关键在于您希望将其用作单个参数。

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

如果你想要多个参数供应商的前缀 ,就像下面的场景一样:

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

预期

 -webkit-transition: -webkit-transform 0.5s linear, width 0.5s linear; -moz-transition: -moz-transform 0.5s linear, width 0.5s linear; -ms-transition: -ms-transform 0.5s linear, width 0.5s linear; -o-transition: -o-transform 0.5s linear, width 0.5s linear; transition: transform 0.5s linear, width 0.5s linear; 

我build议你这个Mixin ,我find了无意义的写作 。

 @function prefix($property, $prefixes: (webkit moz o ms)) { $vendor-prefixed-properties: transform background-clip background-size; $result: (); @each $prefix in $prefixes { @if index($vendor-prefixed-properties, $property) { $property: -#{$prefix}-#{$property} } $result: append($result, $property); } @return $result; } @function trans-prefix($transition, $prefix: moz) { $prefixed: (); @each $trans in $transition { $prop-name: nth($trans, 1); $vendor-prop-name: prefix($prop-name, $prefix); $prop-vals: nth($trans, 2); $prefixed: append($prefixed, ($vendor-prop-name $prop-vals), comma); } @return $prefixed; } @mixin transition($values...) { $transitions: (); @each $declaration in $values { $prop: nth($declaration, 1); $prop-opts: (); $length: length($declaration); @for $i from 2 through $length { $prop-opts: append($prop-opts, nth($declaration, $i)); } $trans: ($prop, $prop-opts); $transitions: append($transitions, $trans, comma); } -webkit-transition: trans-prefix($transitions, webkit); -moz-transition: trans-prefix($transitions, moz); -o-transition: trans-prefix($transitions, o); transition: $values; } 

指南针有一个转换混合,你可以看看(或者你可以使用指南针)。 你可以在这里更好地看看它: http : //beta.compass-style.org/reference/compass/css3/transition/ 。

通过它的外观,你不能做一个不定数量的mixins,因为Compass的维护者也有助于维护Sass,你可以看到他已经为他的转换mixin定义了最多10个单独的参数。