Scss - retina @2x mixin #scss #retina

retina-ready-mixin.scss

// easy retina-ready images
// http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
@mixin image-2x($image, $width, $height) {
  @media (-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) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

// use full size of 1x image
@include image-2x("../img/[email protected]", WIDTHpx, HEIGHTpx);