Asset helpers don't compile in Microsoft filter statements

[mbaumbach]

The title may be a bit specific, but this is the only case I've tried. I imagine this could potentially happen in other cases too. I've been using Fancybox (Fancybox.net) and they have some IE filters. While trying to convert the file to use assets, I hit this bug:

.fancybox-ie6 #fancybox-close {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=image_path('fancybox/fancy_close.png'), sizingMethod='scale');
}

I converted the file to have an scss ending and other image_paths are working fine, it's just the ones in this hacky IE filter stuff. I imagine this is falling outside of some of the parsing rules, but I haven't looked at the sass/sass-rails code yet.

Just to note, this is running on Rails 3.1 final.

[mbaumbach]

Simple workaround is to obviously append "erb" to the filename and just do those files using Ruby's helpers, but that just feels dirty. :)

[chriseppstein]

This is not a bug (and if it were it would be a bug against sass, not sass-rails :P)

The filter syntax is not actually legal CSS syntax. As a result the Sass parser has a hack in place where it basically escapes the value of the filter attribute instead of parsing it like it does the other properties. As such, you need to interpolate any scripting with #{...} as you would in selectors or property names:

.fancybox-ie6 #fancybox-close {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=#{image_path('fancybox/fancy_close.png')}, sizingMethod='scale');
}

[mbaumbach]

Thank you, I was looking through the code in sass-rails and didn't see anywhere I could apply a patch, so my next target was going to be Sass. :)

I think this is fair though, as illegal CSS syntax shouldn't necessarily be supported, but I'm sure that will be fought over the more Rails 3.1 becomes standard. :)

[chriseppstein]

there's not much to fight about. MS has changed the filter syntax in IE9+ to use strings instead, and you have to use #{} interpolation in sass strings, so there's not really any point in supporting the legacy syntax with anything more than we have already.

[zanedev]

I found this to be a good solution, using a mixin: http://dontwakemeup.com/ie8-backgroundcover-fallback-and-rails/

[dougfarre]

Why is this closed? This is still broken for me.