Question

所以我正在尝试做一些与此功能相同的事情：

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

...使用transitionFast mixin，但我想对缓动函数和速度严格要求，所以我在mixin中定义了它们，如下所示：

@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

在你的情况下，有几种方法可以使用sass splat-like args：

1）如果你用splat args定义mixin，那么：

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

你把它包括在内是正常的：

@include transitionFast(firstArg, secondArg, thirdArg);

然后你得到

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

2）当你没有指定splat args时，你也会得到同样的东西

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

并将他们包含在双亲中

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

3）如果您以这种方式声明mixin：

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

并称之为：

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

你会得到类似于默认行为的行为（即没有splat迭代）：

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;与Pik_at建议的罗盘@include transition( $prop $ease );一起使用，它更干燥，更性感。

只是为了好玩：

如果你原样离开（上面）mixin，并将其包括在内：

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

它编译为

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

结合迭代和常规'splatting'，非常酷的东西：）

Answer 2

数组参数应该在括号上：

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

我做了一个简单的代码测试来向您展示： http://codepen.io/pik_at/pen/wBjgpY

同样，使用Compass可以帮助您添加带有浏览器前缀的转换mixin：

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

Sass mixin有多个可选参数，但只有一个属性

2 个答案: