Skip to content

Instantly share code, notes, and snippets.

@rickharris
Created December 18, 2011 17:02
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save rickharris/1493930 to your computer and use it in GitHub Desktop.
Save rickharris/1493930 to your computer and use it in GitHub Desktop.
Media queries with IE support using Sass 3.2 features
// 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;
}
}
body {
font-size: 18px;
color: blue; }
// Transparently ignore media queries for your IE stylesheet
@mixin respond-to($media) {
@content
}
@import "shared";
<!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>
body {
font-size: 18px; }
@media only screen and (min-width: 992px) {
body {
color: blue; } }
// 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";
@st3phan
Copy link

st3phan commented Jun 18, 2012

What if I have one more breakpoint, say 'widescreen', but I don't want these to show in <ie9. I only want the styles up to the desktops breakpoint. How do I accomplish this?

@st3phan
Copy link

st3phan commented Jun 18, 2012

This is my current solution for ie.scss:

@mixin respond-to($media) {
    @if $media != widescreen {
        @content;
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment