CODEWITHSUNDEEP
sass
GeeWhizBang
GeeWhizBang

Reputation: 857

Passing list elements as arguments to a mixin

The following code works except for when I try to pass the $gradient to @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));
}

How to pass a list (e.g. $gradient) to a mixin that expects multiple arguments?

Upvotes: 3

Views: 2064

Answers (1)

Martin Turjak
Martin Turjak

Reputation: 21234

To pass a list of parameters to a mixin that accepts multiple parameters you would want to use it like this:

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

the three dots indicate that you want to fill in the arguments from the list elements ... otherwise the whole list is passed as a single argument ... and the linear-gradient() mixin fails (as it expects at least two color stop arguments).

DEMO

Upvotes: 6

Related Questions