internet-explorer - 如何强制 Sass 为 Internet Explorer 的 DXImageTransform 渐变以十六进制格式输出颜色？

Question

我有这个漂亮的 mixin 用于在 SCSS 中做渐变。

@mixin gradient($from, $to) {
    background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
    background: -moz-linear-gradient(top,  $from, $to);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
}

问题是 SCSS 自动将我的 HEX 值更改#FFFFFF为 word white。IE 过滤器无法处理此问题。他们需要完全形成的 HEX 值。有没有办法强制 SCSS 不转换我的值？我不想重写我的整个 CSS 文件来适应这个怪癖。

Answer 1

我遇到了同样的问题（使用 CodeKit 的内置 SCSS 编译器），我使用ie-hex-str函数修复了它：

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($from)}', endColorstr='#{ie-hex-str($to)}');

请注意，这将生成一个八位十六进制数字 (RGBA)，而不是更常见的六位 RGB 版本，因此如果您将样式值传递给 JavaScript，您需要确保您的 JavaScript 可以处理更长的颜色代码。

Sass 参考手册中涵盖了这个确切的 IE 过滤器问题。