Compass, SASS, Gradients, and IE? [duplicate]

Question

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

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

Code in:

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

Code out:

.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

For versions of IE before IE10, you'll have to deal with IE's gradient filter.

For IE10 and newer, the unprefixed linear-gradient should work^[1]. If you have trouble however, other sites simply use the vendor prefix -ms-linear-gradient. The syntax for both versions is the same as all the other vendor-prefixed gradients.

Answer 2

you can simply create your own mixin, so your code would look like that:

@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));
}