At times, it might be unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass Show archive.org snapshot , this can be achieved in a relatively non-hackish way without CSS hacks.
Step 1
Move your current Sass file into a partial. Let's assume it was called screen.sass. Rename it _screen.sass.
Step 2
Create two new Sass files:
Call this one screen.sass:
$ie = false
@import screen
Call this one screen_for_ie.sass:
$ie = true
@import screen
Step 3
Change your page head to something like this:
<!--[if gt IE 8]><!-->
<%= stylesheet_link_tag 'screen', :media => 'screen' %>
<!--<![endif]-->
<!--[if lte IE 8]>
<%= stylesheet_link_tag 'screen_for_ie', :media => 'screen' %>
<![endif]-->
We treat IE9 like a non-IE here, because of its improved CSS3 compatibility.
Step 4
Insert the conditionals into your _screen.sass, like this:
.box
@if $ie
border: 1px solid #aaa
@else
-moz-box-shadow: 0 0 5px #aaa
-webkit-box-shadow: 0 0 5px #aaa
box-shadow: 0 0 5px #aaa
Posted by Tobias Kraze to makandra dev (2011-03-29 10:18)