CSS: Sprite icons both retina and normal.

sprite.scss

$sprite-spacing: 1px;

$sprite-normal-map: sprite-map( "normal/*.png", $spacing: $sprite-spacing );
$sprite-normal: sprite-url( $sprite-normal-map );

$sprite-retina-map: sprite-map( "retina/*.png", $spacing: $sprite-spacing );
$sprite-retina: sprite-url( $sprite-retina-map );

@mixin generate-sprite-class( $map, $prefix: 'sprite--' ) {
	@each $file in sprite-names( $map ) {

	    .#{$prefix}#{$file} {
	        background-position: sprite-position( $map, $file );
	        height: image-height( sprite-file( $map, $file ) );
		width: image-width( sprite-file( $map, $file ) );
	    }
	}
}

@mixin use-sprite( $name ) {
	@extend .sprite;
	@extend .#{$name};
}

.sprite {
	background: $sprite-normal no-repeat;	
}

@include generate-sprite-class( $sprite-normal-map );

@media (-webkit-min-device-pixel-ratio: 2), 
    (-o-min-device-pixel-ratio: 3/2),
    (min--moz-device-pixel-ratio: 2), 
    (min-device-pixel-ratio: 2), 
    (min-resolution: 144dppx) {

    		.sprite {
			background: $sprite-retina no-repeat;
			background-size: 50%;
		}

		@include generate-sprite-class( $sprite-retina-map );

	}