Skip to content

Instantly share code, notes, and snippets.

@mwanberg
Created August 31, 2013 04:53
Show Gist options
  • Save mwanberg/6396285 to your computer and use it in GitHub Desktop.
Save mwanberg/6396285 to your computer and use it in GitHub Desktop.
This Sass mixin lets you target variablized media queries, arbitrary min-width breakpoints, IE versions 7-10, and print. It defaults to applying your media query styles to both IE8 (since that version doesn't recognize media queries) and to print media queries, but you can unset the default behavior using arguments.
//
// Variables assumed by the mixin
//
$print: "print";
$ie10: ".ie10";
$ie9: ".lt-ie10";
$ie8: ".lt-ie9";
$ie7: ".lt-ie8";
//
// Respond-to
//
// Using the first argument, you can target:
// - $ie7, $ie8, $ie9, $ie10 (pre-defined variables)
// - $print
// - Any media query defined in _variables.scss
// - Any number in ems, for arbitrary breakpoints
// - Any arbitrary media query, contained in ""
//
// Second argument automatically sets your styles to apply to print.
// If you don't want your style applying to print, set the second variable
// to anything but "true".
//
// Third argument defaults to giving IE8 media query styles. Set to "false"
// if you don't want your styles applying to IE8.
@mixin respond-to($target, $target-print: true, $target-ie8: true) {
// Targeting IE versions
// Assumes you have conditional wrapper classes in place and
// variables in place mapping to those wrappers.
@if $target == $ie7
or $target == $ie8
or $target == $ie9
or $target == $ie10 {
// Turning off other two variables to strictly target the IE version
$target-print: false;
$target-ie8: false;
// Putting the styles in the appropriate IE wrapper class
#{$target} & {
@content;
}
}
// Allowing use of breakpoints or targets defined in _variables.scss
@else if $target {
// Allowing for arbitrary breakpoints
@if type-of($target) == "number" {
@media only screen and (min-width: #{$target}) {
@content;
}
}
// If it's $print, just targeting print
@else if $target == $print {
$target-print: false;
$target-ie8: false;
}
// Putting our styles in our custom media query
@else {
@media #{$target} {
@content;
}
}
}
// Putting the styles into print media queries
@if $target-print == true {
@media #{$print} {
@content;
}
}
// Allowing us to generate a separate print stylesheet
@if $target-print == true
or $target == $print {
// This variable is off by default. Declare "true" at
// beginning of print.scss and then include styles.scss
// if you want to generate a separate print stylesheet.
$print-styles: false !default;
// If enabled, generating the styles w/o media queries
// and with an extra level of specificity.
@if $print-styles != false {
html & {
@content;
}
}
}
// Giving media query styles to IE8, if set as true
@if $target-ie8 == true {
.lt-ie9 & {
@content;
}
}
}
// Example usage. Try it on SassMeister.com.
$print-styles: true;
.grid-item {
@include respond-to(33em, false, false) {
color: orange;
}
@include respond-to("screen", true, false) {
color: pink;
}
@include respond-to($ie8) {
color: red;
}
@include respond-to($print) {
color: blue;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment