Sass MQ Mixin

_responsive.sass

$narrow-device: "(max-width: 539px)" !default
$standard-device: "(min-width: 540px)" !default
$wide-device: "(min-width: 1200px)" !default
$retina-device: "(-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)" !default

@mixin responds-to($device)
  @if $device == wvp
    @media #{ $wide-device }
      @content

  @if $device == svp
    @media #{ $standard-device }
      @content

  @else if $device == nvp
    @media #{ $narrow-device }
      @content

  @else if $device == retina
    @media #{ $retina-device }
      @content