Gradient mixin for IE6-8 using filters, only does simple linear gradients and must be applied seperately from the linear-gradient mixin. Closes GH-183.

frameworks/compass/stylesheets/compass/css3/_gradient.scss

@@ -1,4 +1,5 @@
 @import "shared";
+@import "compass/utilities/general/hacks";
 
 // The linear gradient mixin works best across browsers if you use percentage-based color stops.
 //
@@ -52,6 +53,17 @@
   background-image: #{$background}linear-gradient($start, $color-stops);
 }
 
+// Emit a IE-Specific filters that renders a simple linear gradient.
+// For use in IE 6 - 8. Best practice would have you apply this via a
+// conditional IE stylesheet, but if you must, you should place this before
+// any background-image properties that you have specified.
+@mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
+  @include has-layout;
+  $gradient-type: if($orientation == vertical, 0, 1);
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}')";
+}
+
 // Because of webkit's limitations, the radial gradient mixin works best if you use
 // pixel-based color stops.
 //

lib/compass/sass_extensions/functions/colors.rb

@@ -37,6 +37,15 @@ module Compass::SassExtensions::Functions::Colors
     color.with(:saturation => scale_color_value(color.saturation, amount.value))
   end
 
+  # returns an IE hex string for a color with an alpha channel
+  # suitable for passing to IE filters.
+  def ie_hex_str(color)
+    assert_type color, :Color
+    alpha = (color.alpha * 255).round
+    alphastr = alpha.to_s(16).rjust(2, '0')
+    Sass::Script::String.new("##{alphastr}#{color.send(:hex_str)[1..-1]}".upcase)
+  end
+
   private
   def scale_color_value(value, amount)
     if amount > 0

test/fixtures/stylesheets/compass/css/gradients.css

@@ -217,3 +217,18 @@
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
   background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%);
   background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%); }
+
+.ie-horizontal-filter {
+  *zoom: 1;
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FF000000');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FF000000')"; }
+
+.ie-vertical-filter {
+  *zoom: 1;
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF000000');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF000000')"; }
+
+.ie-alpha-filter {
+  *zoom: 1;
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF')"; }

test/fixtures/stylesheets/compass/sass/gradients.sass

@@ -140,3 +140,12 @@ $experimental-support-for-svg: true
 
 .alpha-linear-svg
   +linear-gradient(color_stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))
+
+.ie-horizontal-filter
+  +filter-gradient(white, black, horizontal)
+
+.ie-vertical-filter
+  +filter-gradient(white, black, vertical)
+
+.ie-alpha-filter
+  +filter-gradient(rgba(#fff, 1), rgba(#fff, 0))