Search code examples
sasscompass-sass

Compass background mixin with variable argument

Here is a very reduced test case of what I am trying to accomplish:

This works:

html
  $gradient: red, salmon
  +background(linear-gradient($gradient))

This does not work:

html
  $gradient: top, red, salmon
  +background(linear-gradient($gradient))

And it gives me this error: "At least two color stops are required for a linear-gradient()"

Yet, $gradient: top, red 10%, salmon 10% doesn't work. Nor does $gradient: 35% 10%, red 10%, salmon 10%. I need to be able to pass any valid CSS3 combination of the gradient syntax into the mixin, even multiple gradients.

+background(linear-gradient(35% 10%, red 10%, salmon 10%)) works, so I assume it should with a variable placeholder as well.

How can I get +background to accept any valid CSS I pass it?

Solution

  • Use Sass Variable Arguments:

    html
  $gradient: top, red, salmon
  +background(linear-gradient($gradient...))