Question

因此，根据指南针，它们仅支持Chrome，Safari，Firefox 3.6和Opera。

有关如何在罗盘/其他一些解决方法中添加IE支持的任何想法？

代码：

  @import "compass";    
   .testgradient {
    @include background(
      linear-gradient(top left, #333, #0c0)
    );
  }

代码输出：

.testgradient {

  background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00));

  background: -webkit-linear-gradient(top left, #333333, #00cc00);

  background: -moz-linear-gradient(top left, #333333, #00cc00);

  background: -o-linear-gradient(top left, #333333, #00cc00);

  background: linear-gradient(top left, #333333, #00cc00);
}

Answer 1

对于IE10之前的IE版本，您必须处理IE gradient filter。

对于IE10及更新版本，未加前缀的linear-gradient应该可以使用^[1]。但是，如果您遇到问题，other sites只需使用供应商前缀-ms-linear-gradient。两个版本的语法与所有其他以供应商为前缀的渐变相同。

Answer 2

你可以简单地创建自己的mixin，所以你的代码看起来像这样：

@import "compass";    
@mixin myBackground ($direction, $colorList) {
    background: -ms-linear-gradient($direction, $colorList);
    @include background(linear-gradient($direction, $colorList));
}

.testgradient {
    @include myBackground(top left, (#333, #0c0));
}

Answer 3

如果您不想破坏整个SASS文档，请尝试以下方法：

filter: e("progid:DXImageTransform.Microsoft.gradient( startColorstr=${topcolor}, endColorstr=${bottomcolor},GradientType=0)");

Answer 4

对于简单的线性渐变，请参阅：http://compass-style.org/reference/compass/css3/images/#mixin-filter-gradient，另请参阅：CSS (perhaps with Compass): Cross-browser gradient

因此您可以使用如下所示的SCSS代码：

 @import "compass";
   .testgradient {
    background: #333; /* Old browsers */

    @include background(
      linear-gradient(top left, #333, #0c0)
    );

    @include filter-gradient(#333, #0c0, top left); /* IE 6 - 8 */
  }

上面的代码编译成CSS如下：

.testgradient {
  background: #333;
  /* Old browsers */
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwY2MwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00));
  background: -moz-linear-gradient(top left, #333333, #00cc00);
  background: -webkit-linear-gradient(top left, #333333, #00cc00);
  background: linear-gradient(to bottom right, #333333, #00cc00);
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF333333', endColorstr='#FF00CC00');
  /* IE 6 - 8 */ }

指南针，SASS，Gradients和IE？

4 个答案: