SCSS mixin for retina background images

background-image2x.scss

@mixin background-image2x($image, $extension: 'png') {
  $imageOrig: "#{$image}.#{$extension}";
  $image2x: "#{$image}@2x.#{$extension}";

  $width: image-width($imageOrig);
  $height: image-height($imageOrig);

  background-image: image-url($imageOrig);

  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: image-url($image2x);
    background-size: $width $height;
  }
}