CSS: Media queries
// SASS:
@mixin media($media) {
@if $media == small {
@media only screen and (max-width: 899px) {
@content;
}
}
@else if $media == medium {
@media only screen and (min-width: 900px) {
@content;
}
}
@else if $media == large {
@media only screen and (min-width: 1200px) {
@content;
}
}
}
// UZYCIE:
.container {
margin: 0 auto;
@include media(small) {
width: 600px;
}
@include media(medium) {
width: 900px;
}
@include media(large) {
width: 1200px;
}
}
// OUTPUT:
.container {
margin: 0 auto;
}
@media only screen and (max-width: 899px) {
.container {
width: 600px;
}
}
@media only screen and (min-width: 900px) {
.container {
width: 900px;
}
}
@media only screen and (min-width: 1200px) {
.container {
width: 1200px;
}
}