Using Compass to generate normal and retina sprite maps

compass-retina-sprites.scss

$sprites: sprite-map("sprites/*.png");
$sprites-retina: sprite-map("sprites-retina/*.png");

@mixin sprite-background($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 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
    background-image: sprite-url($sprites-retina);
    @include background-size(ceil(image-width(sprite-path($sprites-retina)) / 2) auto);

    @if (sprite-position($sprites, $name) != sprite-position($sprites-retina, $name)) {
      $ypos: round(nth(sprite-position($sprites-retina, $name), 2) / 2);
      background-position: 0 $ypos;
    }
  }
}

// Usage.
.mail-icon {
  @include sprite-background(mail);
}

Moved the background-image: sprite-url($sprites-retina); before the all the image-width, sprite-position and sprite-path call to prevent undefined sprite file error.