将列表元素作为参数传递给 mixin答案

【问题标题】：Passing list elements as arguments to a mixin将列表元素作为参数传递给 mixin
【发布时间】：2014-02-20 05:08:15
【问题描述】：

以下代码有效，除非我尝试将$gradient 传递给@include background-image。

@mixin compositeFill($size: 100px, $gradient:(top, #000000 0%, #FFFFFF 100%)) {

    $isTop: nth($gradient, 1) == "top";
    $direction: if($isTop, vertical, horizontal);
    $widthHeight: if($isTop, height, width);
    $heightWidth: if($isTop, width, height);

    // snipped a whole bunch of irrelevant stuff
    // this is what fails:
    @include background-image(linear-gradient($gradient));
}

如何将列表（例如$gradient）传递给需要多个参数的mixin？

【问题讨论】：

Generic @mixin for sass with multiple and varied values的可能重复
不，它不是 Generic @mixin for sass 的副本，具有多个不同的值。 stackoverflow.com/questions/18229924/… 需要对 $gradient 做一些事情，这样它才能正确传递给 linear-gradient()，我已经尝试了很多东西，但都没有。

标签： sass

【解决方案1】：

要将参数列表传递给接受多个参数的mixin，您可以像这样使用它：

@include background-image(linear-gradient($gradient...));

三个点表示您要填写列表元素中的参数...否则整个列表作为单个参数传递...并且linear-gradient() mixin 失败（因为它需要至少两个颜色停止参数）。

DEMO

【讨论】：