compass-retina-sprites.scss

@mixin my-sprite-background ($sprites, $sprites-retina, $name) {
  background-image: sprite-url($sprites);
  background-position: sprite-position($sprites, $name);
  background-repeat: no-repeat;
  display: block;
  height: image-height(sprite-file($sprites, $name));
  width: image-width(sprite-file($sprites, $name));
  @media (-webkit-min-device-pixel-ratio: 2),
         (-o-min-device-pixel-ratio: 3/2),
         (min-device-pixel-ratio: 2) {
    // Workaround for https://gist.github.com/2140082
    @if (sprite-position($sprites, $name) != sprite-position($sprites-retina, $name)) {
      $ypos: round(nth(sprite-position($sprites-retina, $name), 2) / 2);
      background-position: 0 $ypos;
    }
    @include background-size(image-width(sprite-path($sprites)) auto);
    background-image: sprite-url($sprites-retina);
  }
}

/*** Usage
$nonretina: sprite-map("sprite/non-retina/*.png", $spacing: 60px, $layout: vertical);
$retina: sprite-map("sprite/retina/*.png", $spacing: 60px, $layout: vertical);

div.item1 {
  @include my-sprite-background($nonretina, $retina, "my-image-name1");
}
***/