Retina Sprite CSS with Compass

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 {
	  @each $i in sprite_names($naviconsNormal){
		.icn-#{$i}{
		  $ypos: round(nth(sprite-position($naviconsRetina, $i), 2) / 2);
		  background-position: 0 $ypos;
		}
	  }
	}

//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

Thank you! I was wondering how to create a sprite only retina, I took your code and adapted it to my needs, it works perfectly now.

I tried https://gist.github.com/thulstrup/2140082 before and gives me an error when running grunt serve. I hope this works.