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 (-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.
    @include background-size(444px auto);
    background-image: sprite-url($sprites-retina);
  }
}

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

My smaller contribution: https://gist.github.com/tomasdev/56bc62e86ab0700f8298 works right out of the box if you're planning to save only the biggest assets and not the pixelated (non-retina) ones.

@mbilalsiddique1 - thanks for this bit above. Working well for my usage thus far. Maybe i missed it, but any way to have the css for all icons in the folder automatically render with their unique file names as classes, instead of defining each one again ( as you show in your example ) ?

// Example Usage. .icon-analytics { @include icon-sprite(main-sprite); }

I believe i figured it out how to declare all the sprites in the map. Works well on top of whats above.

$sprite-names: sprite_names($icon-sprites);
@each $sprite in $sprite-names {
    .icon-#{$sprite} {
      @include icon-sprite($sprite, true);
    }
} 

How to combine this mixin to get the image height of the sprite?