指南针、SASS、渐变和 IE？ [复制]

Question

所以根据 compass 的说法，在渐变方面，它们仅支持 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

对于简单的线性渐变，请参阅：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 */ }

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

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

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