$tablet = 1024px;
$mobile = 600px;
@mixin desktop {
@media (min-width: #{$tablet}) {
@content;
}
}
@mixin tablet {
@media (min-width: #{$mobile}) and (max-width: #{$tablet - 1px}) {
@content;
}
}
@mixin mobile {
@media (max-width: #{$mobile - 1px}) {
@content;
}
}
background-color: yellow;
@include tablet {
background-color: red;
}
@include mobile {
background-color: blue;
}