Media Query Sass Mixin [code snippet]
The sass mixin below has default variable values for common breakpoints. But this mixin also allows you to write a custom value if needed.
// default breakpknts
$xs: “480px”;
$sm: “600px”;
$md: “799px”;
$lg: “1010px”;
$xl: “1280px”;
@mixin media-min($size) {
@media (min-width: $size) {
@content;
}
}
@mixin media-max($size) {
@media (max-width: $size) {
@content;
}
}
// Using a variable
@include media-max($sm) {
body {color:red}
}
// Custom value
@include media-min(300px) {
body {color:red}
}
The post Media Query Sass Mixin [code snippet] appeared first on Bootstrap Creative.
