Media queries mixing
Posted by info on November 16th, 2013
Here are some examples of media query mixins i use to generate the media queries needed for different viewport sizes:
@mixin respond-min($width) {
// If we're outputting for a fixed media query set...
@if $fixViewport {
// ...and if we should apply these rules...
@if $fixViewport >= $width {
// ...output the content the user gave us.
@content;
}
}
@else {
// Otherwise, output it using a regular media query
@media screen and (min-width: $width) {
@content;
}
}
}
@mixin respond-max($width) {
// If we're outputting for a fixed media query set...
@if $fixViewport {
// ...and if we should apply these rules...
@if $fixViewport < $width {
// ...output the content the user gave us.
@content;
}
}
@else {
// Otherwise, output it using a regular media query
@media screen and (max-width: $width) {
@content;
}
}
}
// mixins Styles for Old IE:
$oldIE: false !default;
@mixin oldIE {
// Only use this content if we're dealing with old IE
@if $oldIE {
@content;
}
}
// Only use this content if we're NOT dealing with old IE
@mixin modern{
@if $oldIE == false{
@content;
}
}