Skip to content

Instantly share code, notes, and snippets.

@JohnAlbin
Last active May 17, 2024 04:32
Show Gist options
  • Save JohnAlbin/7192522 to your computer and use it in GitHub Desktop.
Save JohnAlbin/7192522 to your computer and use it in GitHub Desktop.
Handing IE8 and lower with Breakpoint + compass/support
// Initialize the Sass variables and partials used in this project.
// Set the legacy IE support variables. We override the default values set by
// the compass/support partial, but let styles-ie8.scss override these values.
$legacy-support-for-ie6 : false !default;
$legacy-support-for-ie7 : false !default; // Note the use of !default.
$legacy-support-for-ie8 : false !default;
// Partials to be shared with all .scss files.
// Add Compass' IE and vendor prefix support variables.
// Docs at http://compass-style.org/reference/compass/support/
@import "compass/support";
// Add the Breakpoint mixin for media query support.
// Docs at http://breakpoint-sass.com/
@import "breakpoint";
.l-general__main {
/* Mobile layout. */
@include breakpoint(555px, $no-query: true) {
/* Tablet layout. */
}
@include breakpoint(888px, $no-query: true) {
/* Desktop layout. */
}
@include breakpoint(1111px, $no-query: false) {
/* Large desktop layout. */
}
@if $legacy-support-for-ie8 {
/* Any extra IE8 only styles. */
}
}
<!--[if (lt IE 9)]>
<link rel="stylesheet" href="/css/styles-ie8.css" media="all" />
<![endif]-->
<!--[if (gte IE 9)|(IEMobile)|(!IE)]><!-->
<link rel="stylesheet" href="/css/styles.css" media="all" />
<!--<![endif]-->
The first bit of code is only read by IE 8 and lower. Other browsers do not
load the styles-ie8.css stylesheet.
The second bit of code is read by all browsers, except IE 8 and lower. IE 8 and
lower do not load the styles.css stylesheet.
The funky comment syntax is required. For details, see
http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
// Styles for IE 8 and lower.
// Set the legacy IE support variables. These override the !default values set
// in _init.scss.
$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : false;
$legacy-support-for-ie8 : true;
// Force the breakpoint mixin to discard all media queries except ones with
// $no-query set to true. Since we use the default values in styles.scss,
// we don't need to set these in _init.scss.
$breakpoint-no-queries : true;
$breakpoint-no-query-fallbacks : true;
@import "styles";
/* Import Sass mixins, variables, Compass modules, etc. */
@import "init";
/* HTML element (SMACSS base) rules */
@import "normalize"; // I <3 Normalize.
/* Layout rules */
@import "layout-general";
/* Components */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment