我不太确定语法,但我正在使用逗号分隔的属性列表$properties
,并希望用逗号加入它们,因此(background-color, color)
变为background-color .5s, color .5s
@mixin transition($properties, $duration) {
$props: ();
@each $prop in $properties {
$tmp: $prop unquote($duration);
$props: append($props, $tmp);
}
$str: join($props, ',');
-moz-transition: $str, -moz-transform $duration;
-webkit-transition: $str, -webkit-transform $duration;
-o-transition: $str, -o-transform $duration;
transition: $str, transform $duration;
}
我实际得到的是:
border-color 0.5s background-color 0.5s ",", -moz-transform 0.5s
应该是:
border-color 0.5s, background-color 0.5s, -moz-transform 0.5s
答案 0 :(得分:3)
通过使用2个加入(追加和加入)操作,您只是稍微复杂一点:
@mixin transition($properties, $duration) {
$props: ();
$duration: unquote($duration);
@each $p in $properties {
$props: append($props, $p $duration, comma);
}
-moz-transition: $props, -moz-transform $duration;
-webkit-transition: $props, -webkit-transform $duration;
-o-transition: $props, -o-transform $duration;
transition: $props, transform $duration;
}
.foo {
@include transition((background-color, color), '.5s');
}
输出:
.foo {
-moz-transition: background-color .5s, color .5s, -moz-transform .5s;
-webkit-transition: background-color .5s, color .5s, -webkit-transform .5s;
-o-transition: background-color .5s, color .5s, -o-transform .5s;
transition: background-color .5s, color .5s, transform .5s;
}