Передача элементов списка в качестве аргументов в mixin

Следующий код работает, за исключением тех случаев, когда я пытаюсь передать $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 ответ

Чтобы передать список параметров в mixin, который принимает несколько параметров, вы хотели бы использовать его следующим образом:

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

три точки указывают, что вы хотите заполнить аргументы из элементов списка... иначе весь список передается как один аргумент... и сбой linear-gradient() mixin ( поскольку он ожидает, по крайней мере, двух аргументов остановки цвета).

DEMO

licensed under cc by-sa 3.0 with attribution.