This function generates a sprite sheet of icons, swaps it out for retina versions, and generates the "width" and "height" properties of the icons for you— automatically. Because we're lazy and have better things to do!

sprite-generation-with-retina.scss

// 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-image: sprite-url($sprites);
	background-position: sprite-position($sprites, $name);
	background-repeat: no-repeat;
	height: image-height(sprite-file($sprites, $name));
	width: image-width(sprite-file($sprites, $name));

	@include retina-media() {
		background-image: sprite-url($sprites2x);
	   	$y-pos: round(nth(sprite-position($sprites2x, $name), 2) / 2);
	   	background-position: 0 $y-pos;
		@include background-size( round(image-width(sprite-path($sprites2x)) / 2) auto );
	};
}

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

Add an ".scss" extensions so syntax highlight can be applied.

Thanks @silvenon!