萨斯混入有多个可选参数，但只有一个属性

Question

所以我试图做功能上等同于这样：

Can a sass @mixin accept an undefined number of arguments?

...有transitionFast混入，但我想是严格关于缓和功能和速度，所以我的混入内定义它们，就像这样：

@mixin transitionFast($property) { 
    -webkit-transition:$property ease 0.2s; 
    -moz-transition:$property ease 0.2s; 
    -o-transition:$property ease 0.2s; 
    transition:$property ease 0.2s; 
} 

如何传递多个$properties这一点，不经过ease 0.2s一部分？我已经试过这样：

@mixin transitionFast($properties...) { 
    @each $property in $properties { 
     transition:$property ease 0.5s; 
    } 
} 

这我想是这样调用：

@include transitionFast(background-color, color); 

，但它不工作，只适用于过渡到最后一个传递的参数。有任何想法吗？

Answer 1

阵列参数应该是支架，如：

@include transitionFast((background-color, color)); 

我做了一个简单的代码测试来告诉你： http://codepen.io/pik_at/pen/wBjgpY

同样，使用指南针会帮助你增加过渡混入与浏览器前缀：

@mixin transitionFast($properties) { 
    @each $property in $properties { 
     @include transition($property 2s ease); 
    } 
} 

Answer 2

你的情况有几种方法去与青菜图示般ARGS：

1）如果你定义一个图示ARGS像这样的mixin：

@mixin transitionFast($properties...) { 
    # with iteration on $properties 
} 

而且你有它正常的是这样的：

@include transitionFast(firstArg, secondArg, thirdArg); 

然后你得到

# compiled 
transition: firstArg; 
transition: secondArg; 
transition: thirdArg; 

2）你也会得到同样的东西，当你不'

@mixin transitionFast($properties...) { 
    # with iteration on $properties 
} 

，并调用它WHIS方式：

吨，双父母

@include transitionFast((firstArg, secondArg, thirdArg)); 

3）如果声明MIXIN这种方式指定图示ARGS

@mixin transitionFast($properties) { 
    # with iteration on $properties 
} 

，并将其纳入

@include transitionFast((background-color, color, red)); 

你会得到类似违约行为的行为（不重复了图示即）：

transition: background-color, color, red; 

现在，回到你的问题，你可以这样做是为了得到你想要的：

$ease: ease 0.5s; 
@mixin transitionFast($properties...) {  
    @each $prop in $properties { 
     transition: $prop $ease; 
    } 
} 
html { 
    @include transitionFast(background-color, color, margin); 
} 

编辑：改为transition: $prop $ease;与罗盘@include transition($prop $ease);一起作为Pik_at建议，它更干燥和性感。

只是为了好玩：

如果离开（上图）混入，因为它是和包括像这样：

@include transitionFast((background-color, color), padding); 

它编译成

transition: background-color, color ease 0.5s; 
transition: padding ease 0.5s; 

结合迭代定期'溅'，非常酷的东西:)