Sass MQ, built by the Guardian, is a Sass mixin that helps you compose media queries in an elegant way.
Here is a quick example of how it works:
$mq-breakpoints: (
mobile: 320px,
tablet: 740px,
desktop: 980px,
wide: 1300px
);
@import 'mq';
.foo {
@include mq($from: mobile, $until: tablet) {
background: red;
}
@include mq($from: tablet) {
background: green;
}
}
Which compiles into:
@media (min-width: 20em) and (max-width: 46.24em) {
.foo {
background: red;
}
}
@media (min-width: 46.25em) {
.foo {
background: green;
}
}
What I love is the way responsive breakpoints are declared using this tool. The $from
and $until
feels more expressive than the typical CSS way of declaring breakpoints.