Search code examples
sasscompass-sass

SCSS mixin with argument interpolation is not working

I'm creating a mixin to generate a CSS background gradient, per Ultimate CSS Gradient Generator.

The mixin looks like this:

@mixin gradient-2-colors($color-1, $color-1-pos, $color-2, $color-2-pos) {
  background: -moz-linear-gradient(top, $color-1 $color-1-pos, $color-2 $color-2-pos);
  ... [OTHER BROWSER-SPECIFIC ENTRIES]...
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-1', endColorstr=\'$color-2\',GradientType=0 );
}

and the last entry is giving me trouble, since $color-1 in startColorstr='$color-1' is not being parsed as a variable! How can I escape this component of the mixin to make the variable work inside of quotes?

Solution

  • Use interpolation:

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color-1}', endColorstr=\'#{$color-2}\',GradientType=0 );