Mediaquery mixin

_mq.scss

// Mediaquery mixin with mobile first approach
//
// $values - One or two numbers for the breakpoint
// $query - Use min(-width) or max(-width). Default: min.
// $expansion - Choose between width and height in the expansion? Default: width.
@mixin mq($values, $query: min, $expansion: width) {
  @if length($values) > 1 {
    $min: nth($values, 1);
    $max: nth($values, 2);

    @media only screen and (min-#{$expansion}: (strip-unit($min / $rem-base)) +em-calc(1)) and (max-#{$expansion}: (strip-unit($max / $rem-base)) +em) {
      @content;
    }

  } @else if $values == 0 {

    @media only screen {
      @content;
    }

  } @else {

    @if $query == min {

      @media only screen and (#{$query}-#{$expansion}: (strip-unit($values / $rem-base)) +em-calc(1)) {
        @content;
      }

    } @else {

      @media only screen and (#{$query}-#{$expansion}: (strip-unit($values / $rem-base)) +em) {
        @content;
      }
    }
  }
}