Sprite generation with retina support for Compass+Sass

// Stick all your icons in a subfolder in your images folder. Mark retina versions with the same filename and "@2x".
$sprites: sprite-map("NAME_OF_SUBFOLDER/*.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+'@2x');
		@include background-size( ceil(image-width(sprite-path($sprites)) / 2) ceil(image-height(sprite-path($sprites)) / 2) );
	};
}

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