sass @mixin 可以接受未定义数量的参数吗？

Question

我正在尝试创建一个用于过渡的 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;

Answer 1

变量参数

有时，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;
}

From : SASS 官方文档

所以你基本上只需要更改你的mixins 声明如下所示：

@mixin transition($var...)
  -webkit-transition: $var
  transition: $var

Answer 2

当您调用 mixin 时，请像这样调用它：

@include transition( (color .5s linear, width .5s linear) );

带有额外的括号。这将使 sass 明白您希望将其用作单个参数。

编辑：如果使用 Sass 3.2 或更高版本，请参阅上面 Jeremie Parker 的回答。 3.2 中添加了实变量参数： http: //chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released

Answer 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 ，我发现 无意义写作。

代码

@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;
}

Answer 4

Compass 有一个过渡 mixin，你可以看一下（或者你可以只使用 Compass）。您可以在这里更好地查看它： http://beta.compass- style.org/reference/compass/css3/transition/。

从表面上看，你不能执行未定义数量的 mixin，因为 Compass 的维护者也帮助维护 Sass，你可以看到他为他的转换 mixin 定义了最多 10 个单独的参数。