Retina Sprite. A Compass mixin that applies larger sprite images for retina devices.

_retina-sprite.scss

// Retina Sprite
// Mixin takes a two sprite maps, one normal and one retina. It then swaps 
// out the sprite images, repositions and resizes the images accordingly
//
// Rules
//
// Image names within the sprites should match. For example logo.png should 
// exist within both folders. If the image doesn't exist within the retina 
// sprite, the image will fallback to the image that does exist.
//
// Accepted parameters
//
// $sprite-map - the sprite map @ normal size
// $sprite-retina-map - the sprite map @ 2x
//
// Example usage
//
// $main-sprite: sprite-map("main/*.png");
// $main-srite-retina: sprite-map("main-retina/*.png");
// @include retina-sprite($main-sprite, $main-srite-retina);
// ==========================================================================

@mixin retina-sprite($sprite-map, $sprite-retina-map) {
    $folder: sprite-map-name($sprite-map);

    .#{$folder}-sprite {
        @include inline-block();
        text-indent: -9999px;
    }

    .#{$folder} {
        background-image: sprite-url($sprite-map);
        background-repeat: no-repeat;
    }

    // Create classes for main sprites folder
    @each $img in sprite-names($sprite-map) {
        .#{$folder}-#{$img} {
            // Extend the parent class with background properties
            // This will also extend the retina version
            @extend .#{$folder};

            background-position: sprite-position($sprite-map, $img);
            height: image-height(sprite-file($sprite-map, $img));
            width: image-width(sprite-file($sprite-map, $img));
        }
    }

    @media (min-resolution: 2dppx),
    (min-device-pixel-ratio: 2),
    (-o-min-device-pixel-ratio: 2/1),
    (-webkit-min-device-pixel-ratio: 2) {
        .#{$folder} {
            background-image: sprite-url($sprite-retina-map);
            @include background-size(ceil(image-width(sprite-path($sprite-retina-map)) / 2) auto);
        }

        @each $img in sprite-names($sprite-retina-map) {
            .#{$folder}-#{$img} {
                $pos: sprite-position($sprite-retina-map, $img);
                background-position: nth($pos, 1) nth($pos, 2) / 2;
            }
        }
    }
}