Last active
December 12, 2015 09:58
-
-
Save timwhitlock/4755263 to your computer and use it in GitHub Desktop.
example of how to use Sass runtime to generate IE-targeted stylesheets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// File: utils.scss | |
// Define mixins and default IE version in your utils include | |
$ie-version: 10 !default; | |
@mixin ie-max ( $max-version ){ | |
@if $ie-version <= $max-version { | |
@content; | |
} | |
} | |
@mixin ie-min( $min-version ){ | |
@if $ie-version >= $min-version { | |
@content; | |
} | |
} | |
// File: main.scss | |
// Reference specific styles for IE versions alongside the main code | |
.exampleThing { | |
@include ie-min(8){ | |
/* this will export for good browsers, plus IE8 and above */ | |
display: inline-block; | |
} | |
@include ie-max(7){ | |
/* this will export for IE7 and below */ | |
display: inline; | |
zoom: 1; | |
} | |
} | |
// File: ie7.scss | |
// Export a stylesheet like ie7.css by setting this in a root file and including what you need | |
$ie-version: 7; | |
@import "utils.scss"; | |
@import "main.scss"; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment