SASS 3.2 Media Queries and Internet Explorer Support

Question

I recently implemented this technique with SASS 3.2 using `@content` blocks on a project I've been working on, and I've just gotten to the point where I need to include support for older browsers such as IE7 and 8. Example: ``` .overview { padding: 0 0 19px; @include respond-to(medium-screens) { padding-top: 19px; } //medium-screens @include respond-to(wide-screens) { padding-top: 19px; } //medium-screens } ``` They both don't support media queries, and I've often handled this in the past by serving up all styles to these browsers when I had my media queries separated into separate partial files such as _320.scss, _480.scss and in my IE stylesheet loading them like so: ``` @import 320.scss; @import 480.scss; etc. ``` Which would load all styles, and always assign IE7 - 8 a 940px (or whatever the max width is) layout and styles. By nesting styles in SASS 3.2 inline like this, it eliminates the need for separate partial stylesheets, but totally screws up how I load styles for IE. Any id…

Accepted Answer

You can generate a separate stylesheet for IE<9 that contains everything your normal sheet has, but with flattened media queries based on a set width.

Full explanation here http://jakearchibald.github.com/sass-ie/, but basically you have this mixin:

```
$fix-mqs: false !default;

@mixin respond-min($width) {
    // If we're outputting for a fixed media query set...
    @if $fix-mqs {
        // ...and if we should apply these rules...
        @if $fix-mqs >= $width {
            // ...output the content the user gave us.
            @content;
        }
    }
    @else {
        // Otherwise, output it using a regular media query
        @media screen and (min-width: $width) {
            @content;
        }
    }
}
```

Which you'd use like this:

```
@include respond-min(45em) {
    float: left;
    width: 70%;
}
```

This would be inside `all.scss`, which would compile down to `all.css` with media queries. However, you'd also have an additional file, `all-old-ie.scss`:

```
$fix-mqs: 65em;
@import 'all';
```

That simply imports all, but flattens media query blocks given a fake width of 65em.

SASS 3.2 Media Queries and Internet Explorer Support

Solution

Problem