[sass] - Build fast & automated sprite for retina display

_pictos.scss

//first we'll define the folders where the sprites are and their layouts
$pictos: sprite-map("sprite/pictos/*.png", $layout: smart);
$pictos-2x: sprite-map("sprite/pictos2x/*.png", $layout: smart);

.picto-share_facebook {
  @include use-sprite("share_facebook", $pictos, $pictos-2x);
}

.picto-share_google {
  @include use-sprite("share_google", $pictos, $pictos-2x);
}

_retina-sprites.scss

/*
 * Retina Sprites for Compass
 * by:              Gaya Kessler
 * last update:     01/14/13
 *
 * Usage:
 * 1. create two folders in your image directory (in this case 'icons' and 'icons-2x').
 * 2. adjust the foldernames defined below if you use different names.
 * 3. create sprite images for pixel ratio 1 screens and put them in the first folder.
 * 4. create sprite images for pixel ratio 2 screens and put them in the second folder, use the same filenames.
 * 5. use the sprite-image in your Sass/Scss using: '@include use-sprite(<sprite-name>)'
 */

//Sprite mixin, works perfectly with standard defines
@mixin use-sprite($sprite, $image, $image-2x) {
    background-image: sprite-url($image);
    background-position: sprite-position($image, $sprite);
    background-repeat: no-repeat;
    overflow: hidden;
    display: block;
    height: image-height(sprite-file($image, $sprite));
    width: image-width(sprite-file($image, $sprite));

    @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 2) {
        background-image: sprite-url($image-2x);
        background-position: round(nth(sprite-position($image-2x, $sprite), 1) / 2) round(nth(sprite-position($image-2x, $sprite), 2) / 2);
        background-size: (image-width(sprite-path($image-2x)) / 2) (image-height(sprite-path($image-2x)) / 2);
        height: image-height(sprite-file($image-2x, $sprite)) / 2;
        width: image-width(sprite-file($image-2x, $sprite)) / 2;
    }
}