线性渐变 Firefox 支持答案

【问题标题】：Linear gradient Firefox support线性渐变 Firefox 支持
【发布时间】：2014-08-22 12:23:14
【问题描述】：

当我在ColorZilla 上进行线性渐变时，我采用如下所示的 scss 代码：

@include background-image(linear-gradient(top,  #659adc 0%,#004ca2 100%));

生成这个css：

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #659adc), color-stop(100%, #004ca2));
background-image: -webkit-linear-gradient(top, #659adc 0%, #004ca2 100%);
background-image: -o-linear-gradient(top, #659adc 0%, #004ca2 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(0%, #659adc), to(#004ca2));
background-image: linear-gradient(top, #659adc 0%, #004ca2 100%);

这些都不适用于 Firefox。所以我做了一些调整，然后添加了一些我知道在 Firefox 中有效的东西：

@include background-image(linear-gradient(to bottom,  #659adc 0%,#004ca2 100%)); //notice the 'to bottom'

现在这是生成的 css：

background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #659adc), color-stop(100%, #004ca2));
background-image: -webkit-linear-gradient(to bottom, #659adc 0%, #004ca2 100%);
background-image: -o-linear-gradient(to bottom, #659adc 0%, #004ca2 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#659adc), to(#004ca2));
background-image: -webkit-linear-gradient(top, #659adc 0%, #004ca2 100%);
background-image: -o-linear-gradient(top, #659adc 0%, #004ca2 100%);
background-image: linear-gradient(to bottom, #659adc 0%, #004ca2 100%);

在 Firefox 中渲染良好，但指南针任务会出现此错误：

无法确定：to的相反位置

想法？跨浏览器scss线性渐变怎么做？

【问题讨论】：

你有最新版本的指南针吗？
@cimmanon，它是 0.12.3
这不是最新版本。你需要 1.0
这不能回答你的问题，但值得注意的是，简单地使用：background-image: linear-gradient(#659adc, #004ca2) 应该可以正常工作，因为渐变默认从上到下。
@cimmanon，它有效，把它作为答案

标签： css sass compass-sass grunt-contrib-compass

【解决方案1】：

请安装指南针版本~1.0.0

要检查您正在使用的指南针的当前版本，请输入：

$ compass version

我通过卸载当前版本并安装最新版本来更新我的指南针。

$ gem uninstall compass $ gem install compass

或

如果您不想更新，可以简单地使用它而无需渐变方向。

background-image: linear-gradient(#659adc, #004ca2)

【讨论】：