Use for best regular and retina (HD) sprites in a Compass project. To work correctly use two sets of the same sprite images in separate directories within your project images path. (Default is "regular" and "retina" within a singular "sprites" directory.) Both image sets should be identical in naming and composition with the retina images 200% l…

_compass-retina-sprites.scss

$regularSpritePath: "sprites/regular" !default;
$retinaSpritePath: "sprites/retina" !default;
$spriteHoverClass: ":hover" !default;

$regular: sprite-map($regularSpritePath + "/*.png", $layout: smart);
$retina: sprite-map($retinaSpritePath + "/*.png", $layout: smart);

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

@mixin sprite-bg($name, $hover: false, $hover-class: $spriteHoverClass) {
    display: block;
    width: image-width(sprite-file($regular, $name));
    height: image-height(sprite-file($regular, $name));
    background: $sprite-regular-url no-repeat sprite-position($regular, $name);

    @if $hover {
        &#{$hover-class} {
            background-position: sprite-position($regular, $hover);
        }
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 2) {
        background-image: $sprite-retina-url;
        @include background-size(image-width(sprite-path($regular)) auto);
    }
}