As I have mentioned before I love Sass and Compass for authoring and maintaining CSS. In this installment I have come across a minor issue with turning an Internet Explorer Filter for Linear Gradients into a proper SASS Mixin.

Normally I would use the Compass Mixin by first importing the mixin file for gradient in my _base.scss file in this way,

@import "compass/css3/gradient"

and then specifying the gradient colors for my element like this,

.gradient {@include linear-gradient(color-stops(white, #aaaaaa));}

For Internet Explorer this mixin will not work for versions IE8 – IE5.5 (haven't tried it with IE9 yet), so it's your call on how you choose to solve the lack of support. The following are the choices I came across:

1. Give and alternate background color in the css before the gradient property
2. Write an alternate style in some sort of conditional style sheet or use a script like Modernizer to detect support and provide a suitable style
3. Provide an image to replace the browser generated gradient
4. Use CSS Pie or the like...
5. Take advantage of the IE Filters that provide support for Linear Gradients

For me I have to place the importance of the design element on a scale of graceful degradation and site design integrity. Many times I am satisfied with using a solid color or right angle corners but sometimes I don't want to let an element "slip." In my most recent case I didn't feel that the use of an image was maintainable because we Estately-ians want the flexibility to quickly iterate and test an upcoming release. 

I took this IE Gradient Filter,

filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

@mixin ie-gradient($start-gradient, $end-gradient){
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='$start-gradient', endColorstr='$end-gradient');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='$start-gradient', endColorstr='$end-gradient'

then in my page SCSS file I called the mixin BUT it didn't work 100% correctly...my gradient colors were off by a lot! So I wrote to Chris E and Divya Manian, two developers I highly respect. Divya suggested I post to the Compass Google Group.

This turned out to be wonderful. I had a whole host of responses but the "gem" was in a response from Anurag. Turns out SASS has a way of helping variables along in their interpolation (SASS Variable Interpolation) and it's no surprise that the IE Fileters need some help...right! 

The Final IE Linear Gradient Filter Mixin Resulted in Success!

@mixin ie-linear-gradient($start-color, $end-color) {
   filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#{$start-color}', endColorstr='#{$end-color}');
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}')"; }

@include ie-linear-gradient(#FFEFB6, #FFD020);