A Sass mixin for media queries and IE

I'm currently finishing up some front-end co-coding for a client who hired me for all the mobile/responsive goodness. As well as this they wanted me to instigate and create the CSS using Sass/SCSS. Near the end of the project they asked how we would support IE8/7/6.

We did discuss this at the start of the project but carried on with 'all the things'. I had seen all the hotness around Sass 3.2 that would allow you to create a respond-to mixin. So decided to upgrade my Sass gem to the latest version and updated all my 'hand coded' media queries with the relevant Sass/SCSS mixins.

This was great, kinda, it now took the px/em value out of the CSS and allowed me to change it in my Sass settings/mxins/variables file but it did not let me create a fallback for internet explorer. 

Here is the SCSS and the CSS I wanted/expected.

The SCSS setup


// Setting up a quick respond-to mixin
@mixin respond-to($name) {
  @if $name == tablet {
    @media only screen and (min-width: 768px) { @content; }
  }
}

// So this is the mixin that I'm currently using

@mixin this-is-what-i-want($name. $ie-class) {
  ie-class-here { @content; }
  media-query-here } @content; }
}

The SCSS file


// This is how I include the mixin within my SCSS file

.foo {
  margin: 0 auto;
  padding: 0 10px;§
  
  @include this-is-what-i-want(tablet, lt-ie9) {
    min-width: 940px;
    max-width: 1220px;
    padding: 0 20px;
  }
}

My 'wished for' CSS output


.foo {
  margin: 0 auto;
  padding: 0 10px;§
}

.lt-ie9 .foo {
    min-width: 940px;
    max-width: 1220px;
    padding: 0 20px;
}

@media only screen and (min-width: 768px) {
    .foo {
        min-width: 940px;
        max-width: 1220px;
        padding: 0 20px;
     }
}

To The Internets

So I started crawling the gists on gitub to see if anyone had created a little code snippet just for this reason. I didn't. There was nothing. So I quickly asked some really, clever and amazing people on the twitters and I got this bit of code from the fantastic @snugug.


mixin respond-wrapper-fallback($name, $wrapper-class) {
  .#{$wrapper-class} & {
    @content;
  }
  @include respond-to($name) {
      @content;
    }
  }

This now turns my 'wished for' CSS output into a reality and now means I can create a fallback for Internet Explorer from 'whatever' CSS Media Query block I need.

To skin a cat.

There's more than one solution for patching up code for Internet Explorer using Sass. This is the solution I required. Jake Archibald created a IE-friendly mobile-first solution which I shall be likely to use at the start of future projects and there's Nicolas' solution also.