Posted over 9 years ago. Visible to the public.

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, 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

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Tobias Kraze
Last edit:
almost 8 years ago
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Tobias Kraze to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more