Sprite generation with retina support for Compass+Sass

// Stick all your icons in a subfolder in your images folder. Put retina versions in a subfolder of that called "@2x".
$sprites: sprite-map("NAME_OF_SUBFOLDER/*.png");
$sprites2x: sprite-map("NAME_OF_SUBFOLDER/@2x/*.png");

// stolen from 37signals
@mixin retina-media() {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    @content;
  }
}

@mixin sprite($name) {
	background-repeat: no-repeat;
	background-image: sprite-url($sprites);
	background-position: sprite-position($sprites, $name);
	height: image-height(sprite-file($sprites, $name));
	width: image-width(sprite-file($sprites, $name));

	@include retina-media() {
		background-image: sprite-url($sprites);
		background-position: sprite-position($sprites, $name);
		@include background-size( ceil(image-width(sprite-path($sprites2x)) / 2) auto );
	};
}

// then when making your icon:
button:before {
	@include sprite( FILENAME_OF_ICON_WITHOUT_EXTENSION );
}