Using Compass to generate normal and retina sprite maps

compass-retina-sprites.sass

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

=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 (-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
    // Hard coded width of the normal sprite image. There must be a smarter way to do this.
    +background-size(444px auto)
    background-image: sprite-url($sprites-retina)

// Usage.
.mail-icon
  +sprite-background(mail)