Previously, I organized my media queries in LESS by combining them at a single place like this
LESS:
.media-mixin(@break) when (@break = 1200px) {
.abc{
color: red;
}
}
.media-mixin(@break) when (@break = 1200px) {
.xyz{
color: yellow;
}
}
@media all and (max-width: 1200px) {
.media-mixin(1200px);
}
CSS result
@media all and (max-width: 1200px) {
.abc{
color: red;
}
.xyz{
color: yellow;
}
}
I am currently looking for the best method to achieve the same functionality in SASS as I have not found a straightforward approach yet.