Passing list elements as arguments to a mixin

Question

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?

Accepted Answer

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

Passing list elements as arguments to a mixin

Solution

Problem