media queries for retina displays

_mixins.scss

/* @2x Images (Pixel Ratio of 1.25+) */
@mixin image-2x($image, $width, $height) {
  @media only screen and (min--moz-device-pixel-ratio: 5/4),
 	   only screen and (-o-min-device-pixel-ratio: 5/4),
       only screen and (-webkit-min-device-pixel-ratio: 1.25),
       only screen and (min-device-pixel-ratio: 1.25),
       only screen and (min-resolution: 1.25dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}

/* @3x Images (Pixel Ratio of 2.25+) */
@mixin image-3x($image, $width, $height) {
  @media only screen and (min--moz-device-pixel-ratio: 9/4),
 	   only screen and (-o-min-device-pixel-ratio: 9/4),
       only screen and (-webkit-min-device-pixel-ratio: 2.25),
       only screen and (min-device-pixel-ratio: 2.25),
       only screen and (min-resolution: 2.25dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}

/* @4x Images (Pixel Ratio of 3.25+) */ 
@mixin image-4x($image, $width, $height) {
  @media only screen and (min--moz-device-pixel-ratio 13/4),
 	   only screen and (-o-min-device-pixel-ratio: 13/4),
       only screen and (-webkit-min-device-pixel-ratio: 3.25),
       only screen and (min-device-pixel-ratio: 3.25),
       only screen and (min-resolution: 3.25dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}