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

Posted 2023-03-07

【中文标题】sass @mixin 可以接受未定义数量的参数吗？

【英文标题】：Can a sass @mixin accept an undefined number of arguments?

【发布时间】：2011-12-15 07:09:27

【问题描述】：

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

【参考方案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;

发件人：SASS official Documentation

所以您基本上只需将您的 mixins 声明更改为如下所示：

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

【讨论】：

@troelskn 我在约瑟夫和他的已经被选为答案之后发布了我的答案。我添加了我的，因为我问了同样的问题，并在 SASS 文档中找到了答案，并希望它可以为一些开发人员省去处理多余括号的麻烦 :)

是的，看起来这个选项是在 2012 年添加的，在给出问题和我的答案之后。 chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released

您先生是个天才！谢谢！

【参考方案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

【讨论】：

那么现在是单个列表值吗？

【参考方案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，我在 Meaningless Writing 上找到的。代码

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

【参考方案4】：

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

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