adyz/retina-simple-sprite-compass

1: To export the PNGs in different sizes I used Slicy - http://macrabbit.com/slicy/ - a mac app that looks into your PSD and if it finds any layer with .png extention will export that layer to PNG. You can also add a tag to the main group layer to export retina version too. A bit pricy, but it's fine if you value your time.

2: I added the icons in two folders (retina and normal) You just have to make sure that both folders contain the same number of files and they both have the same file name inside.

3: I added this code after long time of searchin, testing, and mashing my head into the wall.

$naviconsNormal: sprite-map("navicons/normal/*.png", $spacing: 10px);
$naviconsRetina: sprite-map("navicons/retina/*.png", $spacing: 20px);

.icn{
	background: $naviconsNormal;
	display: inline-block; // or block
	@include bp-retina {
		background: $naviconsRetina;
		//Instead of sprite-path might be sprite-url
  		@include background-size(image-width(sprite-path($naviconsNormal)) image-				height(sprite-path($naviconsNormal)));
	}
}

@each $i in sprite_names($naviconsNormal){
	.icn-#{$i}{
		background-position: sprite-position($naviconsNormal, $i);
		@include sprite-dimensions($naviconsNormal, $i);
		@include bp-retina {
  			$ypos: round(nth(sprite-position($naviconsRetina, $i), 2) / 2);
  			background-position: 0 $ypos;
		}
	}
}

All this code performs really slow on multiple icons, but I refuse to do-it otherwhise.

• The @include bp-retina it's a mixin for retina screens media query. *

Huge thanks to: Rasmus Thulstrup https://gist.github.com/thulstrup/2140082

and

Alan Hogan https://gist.github.com/alanhogan/2878758