Last active
October 13, 2015 00:28
-
-
Save 2ndkauboy/4110612 to your computer and use it in GitHub Desktop.
A simple mixin that takes a target size and adds a min-width media query and a IE fallback given by a variable for the content.
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
@mixin respond-to-ie($size){ | |
@if $old-ie { | |
@content; | |
} @else { | |
@media all and (min-width: $size) { | |
@content; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Usage
First you have to declare some variables. They might look like this:
Main file styles.scss
Than after importing the mixin to your scss file, you can use it like in this example:
This will produce the following CSS code in your styles.css file:
Secondary file for old IE old_ie.scss
This will create a second file old_ie.css with the following content:
So it's basically the same content but without the media query.
Including the files into your HTML
You simply a conditional comment to include those two files and every browser get's only one of the files with only those properties, that the browser supports: