Question

Here’s an example of a mixin I’m using:

@mixin gradient($from, $to, $height) {
    background-color: #{$to};
    background-image: url("/media/img/gradient/4/#{$height}/#{$from}/#{$to}/");
    background-repeat:repeat-x;
}

The problem is that the $from and $to colors are passed to the url without the #, so a typical call looks like this:

@include gradient(ff00ff, 00ff00, 600);

and the background-color needs a hash in front of it. I want to write the line in the mixin like this:

background-color: ##{$to};

but that doesn’t work… any ideas?

Answer 1

In the end I decided to rewrite:

@include gradient(ff00ff, 00ff00, 600);

as

@include gradient("#ff00ff", "#00ff00", "600");

which works as expected.