zachharkey
6/1/2012 - 3:26 AM

Media queries with IE support using Sass 3.2 features

Media queries with IE support using Sass 3.2 features

style.scss
content_copyfile_download
// media query mixin
// see https://gist.github.com/1215856#file_6_media_queries.scss
@mixin respond-to($media) {
  @if $media == handhelds {
    @content
  }
  @else if $media == wide-handhelds {
    @media only screen and (min-width: 480px) { @content; }
  }
  @else if $media == tablets {
    @media only screen and (min-width: 768px) { @content; }
  }
  @else if $media == desktops {
    @media only screen and (min-width: 992px) { @content; }
  }
}

@import "shared";
style.css
content_copyfile_download
body {
  font-size: 18px; }
  @media only screen and (min-width: 992px) {
    body {
      color: blue; } }
index.html
content_copyfile_download
<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8"/>
    <title>Responsive Example w/ IE Fallback</title>

    <!--[if (gt IE 8) | (IEMobile)]><!-->
      <link rel="stylesheet" href="style.css">
    <!--<![endif]-->

    <!--[if (lt IE 9) & (!IEMobile)]>
      <link rel="stylesheet" href="ie.css">
    <![endif]-->
  </head>

  <body></body>

</html>
ie.scss
content_copyfile_download
// Transparently ignore media queries for your IE stylesheet
@mixin respond-to($media) {
  @content
}

@import "shared";
ie.css
content_copyfile_download
body {
  font-size: 18px;
  color: blue; }
_shared.scss
content_copyfile_download
// Using this structure, this file should be your canonical stylesheet where
// everything would be imported into, so that you can just `@import "shared";`
// in both your normal and IE stylesheets, only having to add libraries and
// such in one place.

// These styles are just a contrived example.
body {
  font-size: 18px;
  @include respond-to(desktops) {
    color: blue;
  }
}