Super Charged Media Queries with Sass MQ

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.