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个单独的参数。
