Compass sprites with placeholder (use compass icon sprites with placeholders) instead of class selectors (except the generated sprite map) and retina support

_sprite.scss

/*
# Sprite (Theme)

*/
// ---------------------------------------

// Config
$disable-magic-sprite-selectors: true;
$sprite-default-margin: 1px;
$sprite-debug: true;

// ---------------------------------------

// Names must be updated per folder
$icons-1x-sprite-base-class: ".icons-1x-sprite"; // name of sprite placeholder defining background-image (use class for retina)
$icons-1x-inline: false; // whether to inline sprite image as base64
$icons-1x-layout: vertical; // how to lay out icons on canvas (can't use smart with 2x support as can't force same wrap on both generated sprites)
$icons-1x-spacing: $sprite-default-margin;  // amount of blank space between individual icons in sprite

// Map & Import
$icons-1x-map: sprite-map("icons-1x/*.png", $spacing: $icons-1x-spacing, $layout: $icons-1x-layout);
// @import "icons-1x/*.png";

// References
$icons-1x-names: sprite-names($icons-1x-map);
$icons-1x-path: sprite-path($icons-1x-map);

// Media Query: wrapping both sprite maps in a query ensures only one is downloaded
@media
only screen and ( -webkit-max-device-pixel-ratio: 1),
only screen and ( max__moz-device-pixel-ratio: 1),
only screen and ( -o-max-device-pixel-ratio: 1/1),
only screen and ( max-device-pixel-ratio: 1),
only screen and ( max-resolution: 96dpi),
only screen and ( max-resolution: 1.0dppx) {
	// Create sprite class/placeholder defining background-image
	#{$icons-1x-sprite-base-class} {
		background-image: $icons-1x-map;
	}
} // @media

// ---------------------------------------

// Names must be updated per folder
$icons-2x-sprite-base-class: $icons-1x-sprite-base-class; // name of sprite placeholder defining background-image (use same class as 1x for retina)
$icons-2x-inline: $icons-1x-inline; // whether to inline sprite image as base64
$icons-2x-layout: $icons-1x-layout; // how to lay out icons on canvas (can't use smart with 2x support as can't force same wrap on both generated sprites)
$icons-2x-spacing: $icons-1x-spacing * 2;  // amount of blank space between individual icons in sprite (should be 2x the 1x sprite)

// Map & Import
$icons-2x-map: sprite-map("icons-2x/*.png", $spacing: $icons-2x-spacing, $layout: $icons-2x-layout);
// @import "icons-2x/*.png";

// References
$icons-2x-names: sprite-names($icons-2x-map);
$icons-2x-path: sprite-path($icons-2x-map);

// Media Query: wrapping both sprite maps in a query ensures only one is downloaded
@media
only screen and ( -webkit-min-device-pixel-ratio: 1.1),
only screen and ( min__moz-device-pixel-ratio: 1.1),
only screen and ( -o-min-device-pixel-ratio: 11/10),
only screen and ( min-device-pixel-ratio: 1.1),
only screen and ( min-resolution: 97dpi),
only screen and ( min-resolution: 1.1dppx) {
	// Create sprite class/placeholder defining a background-image
	#{$icons-2x-sprite-base-class} {
		background-image: $icons-2x-map;
		// set 2x sprite's background-size to 1x sprite image dimensions, allows same position and width/height to be re-used
		background-size: image-width($icons-1x-path) image-height($icons-1x-path);
	}
} // @media

// ---------------------------------------

// Generate icon placeholders (instead of classes)
// Only need one set for 1x and 2x
@each $img in $icons-1x-names {
	// .icon-#{$img}, // (uncomment to test)
	%icon-#{$img} {
		@extend #{$icons-1x-sprite-base-class};
		@include sprite-dimensions($icons-1x-map, $img);
		background-position: sprite-position($icons-1x-map, $img);
		// Optional debugging
		@if ( $sprite-debug == true ) {
			@if ( index($icons-1x-names, $img) and index($icons-2x-names, $img) ) {
				@if (image-width(sprite-file($icons-1x-map, $img)) * 2 != image-width(sprite-file($icons-2x-map, $img)) ) {
					@warn "#{$img} 2x icon (#{image-width(sprite-file($icons-2x-map, $img))}) is not exactly twice the width of the 1x icon (#{image-width(sprite-file($icons-1x-map, $img))})";
				} // width issue
				@if (image-height(sprite-file($icons-1x-map, $img)) * 2 != image-height(sprite-file($icons-2x-map, $img)) ) {
					@warn "#{$img} 2x icon (#{image-height(sprite-file($icons-2x-map, $img))}) is not exactly twice the height of the 1x icon (#{image-height(sprite-file($icons-1x-map, $img))})";
				} // height issue
			} // size issue
			@else {
				@warn "#{$img} 2x icon does not exist or its name does not match the name of the 1x icon";
			} // file issue
		} // if debug
	} // %icon-#{$img}
} // @each	

// ---------------------------------------