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

Question

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

混合看起来像这样：

@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-1instartColorstr='$color-1'没有被解析为变量！如何转义 mixin 的这个组件以使变量在引号内工作？

Answer 1

使用插值：

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