带参数插值的SCSS mixin不起作用

Question

我正在根据Ultimate CSS Gradient Generator创建一个mixin来生成CSS背景渐变。

mixin看起来像这样：

@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 );
}

并且最后一个条目给我带来麻烦，因为$color-1中的startColorstr='$color-1'未被解析为变量！如何逃避mixin的这个组件以使变量在引号内工作？

Answer 1

使用interpolation：

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