我正在尝试为过渡创建一个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;
答案 0 :(得分:57)
变量参数
有时候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 official Documentation
所以你基本上只需要将mixins声明更改为:
@mixin transition($var...)
-webkit-transition: $var
transition: $var
答案 1 :(得分:37)
当您调用mixin时,请将其称为:
@include transition( (color .5s linear, width .5s linear) );
额外的parens。这将使您想要将其用作单个参数。
编辑:如果使用Sass 3.2或更高版本,请参阅Jeremie Parker上面的回答。在3.2:http://chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released
中添加了实变量参数答案 2 :(得分:3)
如果你想要多个参数和供应商前缀,就像以下情况一样:
@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;
我建议你 Mixin ,我在Meaningless Writing找到了。
的代码强>
@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;
}
答案 3 :(得分:0)
Compass有一个转换mixin你可以看看(或者你可以只使用Compass)。您可以在此处更好地查看它:http://beta.compass-style.org/reference/compass/css3/transition/。
从外观来看,你不能做一个未定义数量的mixin,因为Compass的维护者也有助于维护Sass,你可以看到他为他的转换mixin定义了最多10个单独的参数。