Fixing IE gradients with Rails 3.1 and SCSS

I kept getting my CSS gradients in IE 9 messed up by the Rails 3.1 Asset Pipeline. The symptom was that the colors were off - way off! Like purple instead of white or gray.

It took me several hours to get this to work, so I figured I'd share the solution.

The colors were off because IE's progid:DXImageTransform.Microsoft.gradient filter doesn't understand normal CSS colors like 'white' or '#fff'. It needs to have them fed just so.

At first I thought it was the YUI compressor that changed the value, but YUI actually has special handling of IE filters. SCSS is supposed to have the same, but it didn't work for me.

Compass has a solution, which includes a custom helper method, ie-hex-str.

So I imported that, and changed my filter to use it.

But getting my own custom SCSS helper function to work and be called too quite a bit of tweaking. Most of the time it was just being ignored, and I saw ie-hex-str(xxx) in my output.

The result is this SASS helper file, dropped into config/initializers:



and this mixin.css.scss



See the entire gist here.

Enjoy!