This gist is for creating regular and retina sprite sheets. Put the sprite pieces in their appropriate folders and just include the appropriate class name on your element.

compass_retina_sprites.scss

@import "compass/utilities/sprites";
@import "compass/css3/background-size";

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

$sprite-url: sprite-url($sprites);
$sprite-retina-url: sprite-url($sprites-retina);

@mixin sprite-background($name) {
    background-image: #{$sprite-url};
    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));
}

@mixin sprite-background-retina($name) {
    @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-retina-url;
}

// Usage.
@each $name in sprite_names($sprites) {
    .#{$name}-icon {
        @include sprite-background(#{$name});
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 2) {
    @each $name in sprite_names($sprites) {
        .#{$name}-icon {
            @include sprite-background-retina(#{$name});
        }
    }
}