Different CSS for IE using Sass

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