Simple sass mixin that inserts a retina based sprite

sprite_2x.scss

// Resize and return image sprite
@mixin sprite-2x($map, $sprite, $show-bg: 1) {
  $sprite-image: sprite-file($map, $sprite);
  $sprite-width: image-width($sprite-image);
  $sprite-positions: sprite-position($map, $sprite);

  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
    @if $show-bg == 1 {
      background-image: sprite-url($map);  
    }
    
    background-size: ($sprite-width/2) auto;
    background-position: nth($sprite-positions, 1)/2 nth($sprite-positions, 2)/2;
  }  
}

// EXAMPLE:
// Import normal sprite
@import "buttons/*.png";
@include all-buttons-sprites;

// Import the retina sprites
$buttons_2x_sprites: sprite-map("buttons_2x/*.png");

.button
{
  @extend .buttons-normal; // Normal
  @include sprite-2x($buttons_2x_sprites, normal); // Retina

  &:hover
  {
    @extend .buttons-hover; // Normal
    @include sprite-2x($buttons_2x_sprites, hover); // Retina
  }
}