SASS MIXIN for Retina Image Sprite

sass-retina-sprite-mixin.scss

// SASS MIXIN for Retina Image Sprite

@mixin retina-sprite-background($name,$normal,$retina){
  background-repeat: no-repeat;
  background-image: sprite-url($normal);
  background-position: sprite-position($normal,$name);
  height:image-height(sprite-file($normal, $name));
  width: image-width(sprite-file($normal, $name));

  // Media Query for retina
  @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) {

          background-image: sprite-url($retina);
          background-position: 0 round(nth(sprite-position($retina, $name), 2) / 2);
          height:round(image-height(sprite-file($retina, $name)) / 2);
          width: round(image-width(sprite-file($retina, $name)) /2 );

          // treat the @2x retina sprite sheet as 50% wide for double resolution upon display
          $double-width:ceil(image-width(sprite-path($retina)) / 2);
          $auto-height:auto;
          @include background-size($double-width $auto-height);
         }
}

/**
//$spr-sprite-dimensions: true; // Enable this to auto add height and width
@import "spr/*.png";
*/

@mixin retina-sprite-background($name){
background-repeat: no-repeat;
@include normal-sprite( $name );
// Media Query for retina
@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) {

    background-repeat: no-repeat;
    @include retina-sprite( $name );  
      // treat the @2x retina sprite sheet as 50% wide for double resolution upon display
      $double-width:ceil(image-width(sprite-path($retina)) / 2);
      $auto-height:auto;
      @include background-size($double-width $auto-height);
     }

}