带有参数插值的SCSS混合不起作用

Question

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

混入代码如下所示：

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

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

Answer 1

使用interpolation

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