Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// An example of adding named aliases support to Sass-mq.

// Sass-mq is great for building out a single media query declaration. Much of 
// the time though you don't use a declaration just once, you use it throughout
// your Sass codebase. Writing out potentially complex declarations multiple
// times may lead to mistakes, and if you need to change the query then you have
// to do it in multiple places. The CSS WG have identified this as a problem,
// and have added a spec for Custom Media Queries
// (http://dev.w3.org/csswg/mediaqueries-4/#custom-mq) that allow you to provide
// named aliases for longer and more complex media queries and use that instead.

// This is a little mixin that sits atop mq() and allows you to provide similar
// functionality in Sass. I've called it mq-alias(), but would also be correct
// to call it custom-mq() or named-mq() but that's approaching bikeshedding teritoriy.
// This isn't clever enough to support recursive custom names but then that's
// a fair bit of extra complexity for niche functionality that I cba dealing with for now.

@import "mq";

// These are the mq defaults but, we'll repeat them here
// so you can easily see what is going on
$mq-breakpoints: (
    mobile:  320px, // 20em
    tablet:  740px, // 46.25em
) !default;


// A map containg common argument lists that you want to pass to the mq mixin
// This would be empty by default
$mq-aliases: (
  mobile-and-up: (from: mobile),
  mobile-until-tablet: (from: mobile, until: tablet),
  printed-landscape: (and: '(orientation: landscape)', media-type: print)
);


// The actual alias mixin!
// We're defering all the complicated stuff to the mq mixin, this is meerly a
// way of mapping names to argument lists
@mixin mq-alias($name, $aliases: $mq-aliases) {
    @if map-has-key($aliases, $name) {
       @include mq(map-get($aliases, $name)...) {
            @content;
        }
    } @else {
        @warn "Alias #{$name} wasn't found in aliases.";
    }
}

// Thrown in as a compliment to mq-add-breakpoint
@mixin mq-add-alias($name, $args) {
    $new-alias: ($name: $args);
    $mq-aliases: map-merge($mq-aliases, $new-alias) !global;
}

//////////////////////////////////////////////
// Usage examples
//////////////////////////////////////////////

// Equivalent to calling mq($from: mobile)
@include mq-alias(mobile-and-up) {
    body { content: 'mobile->*'; }
}

// Equivalent to calling mq($from: mobile, $until: tablet)
@include mq-alias(mobile-until-tablet) {
    body { content: 'mobile->tablet'; }
}

// Equivalent to calling mq($and: '(orientation: landscape)', $media-type: print)
@include mq-alias(printed-landscape) {
    body { content: 'printed landscape'; }
}

SassMeister-output.css

@media (min-width: 20em) {
  body {
    content: 'mobile->*';
  }
}

@media (min-width: 20em) and (max-width: 46.24em) {
  body {
    content: 'mobile->tablet';
  }
}

@media print and (orientation: landscape) {
  body {
    content: 'printed landscape';
  }
}