Last active
August 29, 2015 14:11
-
-
Save TheDutchCoder/251ef445a85899ca96dc to your computer and use it in GitHub Desktop.
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
// Very basic media query mixin with the option to disable the entire | |
// media query, which will result in compounded styles for IE8. | |
// | |
// The cascade will let you end up with the "biggest" styles. This is | |
// far from perfect (e.g. if you have queries for much larger/wider | |
// media, IE8 will end up using that). | |
@mixin mq($media) { | |
@if $no-mq == true { @content; } | |
@else { | |
@if $media == "lap" { @media only screen and (min-width: 40em) { @content; } } | |
@if $media == "desk" { @media only screen and (min-width: 60em) { @content; } } | |
} | |
} | |
// Example SASS. | |
html { | |
color: #222; | |
@include mq(desk) { | |
color: red; | |
} | |
} | |
// Output with `$no-mq: false;`. | |
// Great, normal media query, all semi-decent browsers are happy. | |
html { | |
color: #222; | |
} | |
@media screen and (min-width: 60em) { | |
html { | |
color: red; | |
} | |
} | |
// Output with `$no-mq: true;`. | |
// Ugly but it works, only one CSS file needed for sub-par browsers! | |
html { | |
color: #222; | |
color: red; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment