带有参数插值的 SCSS 混合不起作用 [重复]答案

【问题标题】：SCSS mixin with argument interpolation is not working [duplicate]带有参数插值的 SCSS 混合不起作用 [重复]
【发布时间】：2023-03-23 16:05:01
【问题描述】：

根据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 );
}

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

【问题讨论】：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$color1, endColorstr=$color2, GradientType=0); 也不起作用...：
如果您使用 Compass，您会省去很多麻烦。它带有很多 mixin，比如gradients。
@bookcasey：我正在使用 Compass... 会看看。谢谢。
特别是这个 mixin：compass-style.org/reference/compass/css3/images/… 用于旧的 IE 东西。
@bookcasey：非常感谢您指出 Compass 是一个 CSS Frameowkr 而不仅仅是一个 CLI 工具（直到现在还没有进入它的主页！这在很多方面都非常像 Bootstrap。真的，非常感谢。不幸的是，我也有一些带有 3 档的线性渐变。看来指南针只做 2 档。

标签： sass compass-sass

【解决方案1】：

使用interpolation:

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

【讨论】：

说实话，行得通。格拉西亚斯。不知道我是如何在文档中错过的。