Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 605
bookcasey Avatar asked Feb 23 '26 17:02

bookcasey


1 Answers

Use Sass Variable Arguments:

html
  $gradient: top, red, salmon
  +background(linear-gradient($gradient...))
like image 108
Miriam Suzanne Avatar answered Feb 26 '26 16:02

Miriam Suzanne