Geek asks and answers

Compass, SASS, Gradients and IE?

Thus, according to the compass, they only support Chrome, Safari, Firefox 3.6, and Opera when it comes to gradients.

Any ideas on how to add IE support to the compass / some other workaround?

Code in:

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

The code:

.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);
}
+5
source share
4 answers

For versions of IE prior to IE10, you will have to deal with the IE gradient filter .

For IE10 and newer unsrefixed linear-gradientshould work [1] . However, if you have problems, other sites simply use the vendor prefix -ms-linear-gradient. The syntax for both versions is the same as for all other gradients with a vendor prefix.

+4

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));
}
+1

If you prefer not to skip all the SASS documentation, try the following:

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

For simple linear gradients see http://compass-style.org/reference/compass/css3/images/#mixin-filter-gradient , and also see: CSS (possibly with Compass): Cross-browser gradient

Thus, you can use the SCSS code as shown below:

 @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 */
  }

The above code compiles in CSS as follows:

.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 */ }
0
source

More articles:


All Articles