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

【问题标题】：How can I force Sass to output colors in hex format for Internet Explorer's DXImageTransform gradients?如何强制 Sass 以十六进制格式为 Internet Explorer 的 DXImageTransform 渐变输出颜色？
【发布时间】：2015-10-29 10:42:12
【问题描述】：

我有这个漂亮的 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 自动将我的十六进制值 #FFFFFF 更改为单词 white。 IE 过滤器无法处理此问题。他们需要完全形成的 HEX 值。有没有办法强制 SCSS 不转换我的值？我不想重写我的整个 CSS 文件来适应这个怪癖。

【问题讨论】：

Sme 不久前，这里的一位海报正试图做到这一点 - 文本化十六进制颜色值。要是我能让你们聚在一起就好了..
我尝试过修复 (stackoverflow.com/questions/9611571/…)。不幸的是，它对我不起作用。 SASS 中没有选项可以关闭 HEX 值的插值，这似乎很愚蠢。大多数时候，当我将变量传递给函数/mixin 时，我希望变量保持一致和可预测
了解您使用的是哪个 Sass 版本会很有用。

标签： internet-explorer sass mixins

【解决方案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 reference manual 涵盖了这个确切的 IE 过滤器问题。

【讨论】：