_mobile.scss

$breakpoints: (
        "phone": 400px,
        "phone-wide": 480px,
        "phablet": 560px,
        "tablet-small": 640px,
        "tablet": 768px,
        "tablet-wide": 1024px,
        "desktop": 1248px,
        "desktop-wide": 1440px
);

@mixin mq($width, $type: max) {
  @if map_has_key($breakpoints, $width) {
    $width: map_get($breakpoints, $width);
    @if $type == min {
      $width: $width + 1px;
    }
    @media only screen and (#{$type}-width: $width) {
      @content;
    }
  }
}

@mixin mq2($max_width, $min_width) {
  @if map_has_key($breakpoints, $max_width) and map_has_key($breakpoints, $min_width) {
    $max_width: map_get($breakpoints, $max_width);
    $min_width: map_get($breakpoints, $min_width);
    $min_width: $min_width - 1px;

    @media only screen and (max-width: $max_width) and (min-width: $min_width)  {
      @content;
    }
  }
}

@mixin retina {
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
    @content;
  }
}

@mixin print {
  @media print {
    @content;
  }
}