Generated by SassMeister.com.

SassMeister-input.scss

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

// An example of adding named ranges support to Sass-mq

@import "mq";

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


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


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

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

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

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

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

// Equivalent to calling mq($from: tablet, $and: '(orientation: landscape)', $media-type: screen)
@include mq-range(complex-thing) {
    body { content: 'complex thing'; }
}

SassMeister-output.css

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

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

@media screen and (min-width: 46.25em) and (orientation: landscape) {
  body {
    content: 'complex thing';
  }
}