I tend to design with a lot of subtle gradients and use the Ultimate CSS Gradient Generator to create them. It spits out CSS that works in every single browser, and it's awesome.
But when working in SASS, I had a slight problem.
@mixin background($top,$bottom)
background: $top
background: -moz-linear-gradient(top, $top 0%, $bottom 100%)
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom))
background: -webkit-linear-gradient(top, $top 0%,$bottom 100%)
background: -o-linear-gradient(top, $top 0%,$bottom 100%)
background: -ms-linear-gradient(top, $top 0%,$bottom 100%)
background: linear-gradient(top, $top 0%,$bottom 100%)
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='$top', endColorstr='$bottom')
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='$top', endColorstr='#$bottom')"
IE8 wouldn't parse my $top and $bottom values in the filter and -ms-filter properties, leaving them as $top and $bottom in the rendered code. The trick is to escape the variables with #{$value}. Thus:
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#{$top}', endColorstr='#{$bottom}')
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$top}', endColorstr='#{$bottom}')"
I had found this post which came to this conclusion in a more verbose way but thought I'd share my solution as it seems to be easier and quicker.