Skip to content

Instantly share code, notes, and snippets.

@elisechant

elisechant/_config.scss

Last active October 9, 2017 15:38
Show Gist options
  • Save elisechant/5881000 to your computer and use it in GitHub Desktop.
Save elisechant/5881000 to your computer and use it in GitHub Desktop.
Download ZIP
IE handling with SASS, Susy and HTML Conditionals. See https://github.com/bensmithett/style, http://jakearchibald.github.io/sass-ie/ Use a global SASS variable to state IE as Boolean. Serve different stylesheets.
Raw
_config.scss
$ie8: false !default;
$ie9: false !default;
$lt-ie9: $ie7 or $ie8;
// Compass cross-browser support configuration
// http://compass-style.org/reference/compass/support/
$legacy-support-for-ie6: false;
$legacy-support-for-ie7: $ie7;
$legacy-support-for-ie8: $ie8;
// Susy settings
// ------------------------------------------------
// Mobile first fluid grid
$total-columns: 4;
$column-width: (60px / $base-font-size) + 0em;
$gutter-width: (20px / $base-font-size) + 0em;
$grid-padding: (20px / $base-font-size) + 0em;
$container-style: fluid;
// Breakpoints
$tablet: ((569px / $base-font-size) + 0em) 8 lt-ie9;
$tablet-only: ((569px / $base-font-size) + 0em) 8 ((1024px / $base-font-size) + 0em);
$tablet-max: 8 ((1024px / $base-font-size) + 0em);
$desktop: ((1025px / $base-font-size) + 0em) 12 lt-ie9;
// In IE7 & 8 all at-breakpoint blocks except $desktop are omitted.
// $desktop at-breakpoint blocks are scoped to a .lt-ie9 class instead of the desktop media query.
$breakpoint-media-output: not $lt-ie9;
$breakpoint-ie-output: $lt-ie9;
Raw
_device.scss
@media {
@if $lt-ie9 {
$container-style: static; // Sets explicit static width for old IE. They get horizontal scrollbars at <1024px.
} @else {
$container-style: magic // Sets a max-width so our grid is fluid up until 1024px, then static.
}
}
Raw
_module.scss
.my-module {
color: chartreuse;
@if $ie7 {
position: relative;
zoom: 1;
}
}
Raw
application-ie8.scss
@charset "utf-8";
$ie8: true;
@import 'application';
Raw
application.scss
@charset "utf-8";
// import all partials
@import 'config';
@import 'device';
Raw
head.html
<!DOCTYPE html>
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!--[if (gte IE 9)|!(IE)]><!--><link rel="stylesheet" href="styles/application.css"><!--<![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="styles/application-ie7.css"><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="styles/application-ie8.css"><![endif]-->
</head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment