gistfile1.scss

// Very basic media query mixin with the option to disable the entire
// media query, which will result in compounded styles for IE8.
//
// The cascade will let you end up with the "biggest" styles. This is
// far from perfect (e.g. if you have queries for much larger/wider
// media, IE8 will end up using that).
@mixin mq($media) {

  @if $no-mq == true { @content; }
  @else {
  
    @if $media == "lap" { @media only screen and (min-width: 40em) { @content; } }
    @if $media == "desk" { @media only screen and (min-width: 60em) { @content; } }
  
  }

}

// Example SASS.
html {
  color: #222;

  @include mq(desk) {
    color: red;
  }
}

// Output with `$no-mq: false;`.
// Great, normal media query, all semi-decent browsers are happy.
html {
  color: #222;
}
@media screen and (min-width: 60em) {
  html {
    color: red;
  }
}

// Output with `$no-mq: true;`.
// Ugly but it works, only one CSS file needed for sub-par browsers!
html {
  color: #222;

  color: red;
}