//--------------------------------------------------------------
// Media Queries | Mixin
//--------------------------------------------------------------
// Breakpoints
$S: 320px !default;
$S-Landscape: 480px !default;
$M: 768px !default;
$L: 1170px !default;
// media queries
@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;
}
}
}
@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;
}
}
// ------- GENERATES -------- //
.media-mixin-test {
color: red;
}
@media only screen and (min-width: 480px) {
.media-mixin-test {
color: blue;
}
}
@media only screen and (min-width: 768px) {
.media-mixin-test {
color: green;
}
}
@media only screen and (min-width: 1170px) {
.media-mixin-test {
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.