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

时间:2014-02-19 18:07:01

标签: sass

以下代码有效,但我尝试将$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?

1 个答案:

答案 0 :(得分:6)

要将一个参数列表传递给一个接受多个参数的mixin,你可以这样使用它:

@include background-image(linear-gradient($gradient...));
三个点表示您要填写列表元素中的参数...否则整个列表将作为单个参数传递...而linear-gradient()混合失败(因为它预计至少有两个颜色停止参数)。

DEMO