sass @mixin 可以接受未定义数量的参数吗? [英] Can a sass @mixin accept an undefined number of arguments?

问题描述

我正在尝试为过渡创建一个 sass mixin.这是我目前所拥有的.

I'm trying to create a sass mixin for transitions. This is what I have so far.

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

我希望能够像这样传递多个参数

I want to be able to pass it multiple arguments like this

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

不幸的是，我收到以下错误

Unfortunately, I get the following error

Syntax error: Mixin transition takes 1 argument but 2 were passed.

有没有办法做到这一点，使它在 css 中产生以下输出，同时仍然接受未定义数量的参数?

Is there a way to do this so it produces the following output in css while still accepting an undefined number of arguments?

-webkit-transition: color .5s linear, width .5s linear;
transition: color .5s linear, width .5s linear;

推荐答案

变量参数

有时，mixin 接受未知数量的参数是有意义的.例如，用于创建框阴影的 mixin 可以将任意数量的阴影作为参数.对于这些情况，Sass 支持可变参数"，它们是混合声明末尾的参数，它接受所有剩余的参数并将它们打包为一个列表.这些参数看起来就像普通的参数，但后面跟着....例如:

Sometimes it makes sense for a mixin to take an unknown number of arguments. For example, a mixin for creating box shadows might take any number of shadows as arguments. For these situations, Sass supports "variable arguments," which are arguments at the end of a mixin declaration that take all leftover arguments and package them up as a list. These arguments look just like normal arguments, but are followed by .... For example:

@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 官方文档

所以你基本上只需要改变你的混合声明看起来像这样:

So you basically just need to change your mixins declaration to look like this :

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

这篇关于sass @mixin 可以接受未定义数量的参数吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！