//--------------------------------------------------------------
// Media Queries | Mixin
//--------------------------------------------------------------
// Breakpoints
$S: 320px !default;
$S-Landscape: 480px !default;
$M: 768px !default;
$L: 1170px !default;
// media queries (min-width)
@mixin MQ($canvas) {
@if $canvas == S {
@media only screen and (min-width: $S) {
@content;
}
}
@else if $canvas == S-Landscape {
@media only screen and (min-width: $S-Landscape) {
@content;
}
}
@else if $canvas == M {
@media only screen and (min-width: $M) {
@content;
}
}
@else if $canvas == L {
@media only screen and (min-width: $L) {
@content;
}
}
}
// media queries (max-width)
@mixin MQ-Max($canvas) {
@if $canvas == S {
@media only screen and (max-width: $S) {
@content;
}
}
@else if $canvas == S-Landscape {
@media only screen and (max-width: $S-Landscape) {
@content;
}
}
@else if $canvas == M {
@media only screen and (max-width: $M) {
@content;
}
}
@else if $canvas == L {
@media only screen and (max-width: $L) {
@content;
}
}
}
// ------- USAGE -------- //
.media-mixin-test {
color:red;
@include MQ(S-Landscape) {
color:blue;
}
@include MQ(M) {
color:green;
}
@include MQ(L) {
color:yellow;
}
}
Media Queries Mixin for SCSS - test on http://www.sassmeister.com
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.