First of all, if you haven't used SCSS and Compass you have been missing out. Don't get me wrong, there's nothing wrong with CSS per se, it's only that SCSS is better. Compass adds additional yum yum to SCSS making it my (and many other way smarter peoples) preferred solution for styling web-projects.
Compass has an excellent solution for creating a so called "spritemap" - in short, it creates it for you. However, Compass does not provide an option for using "retina" or "HIDPI" sprites, which translated into human speech means images which are displayed at half their size. However, Compass gives you an insane amount of control over your sprites, so using some Compass functions I was able (with the help of the Internet) to create a simple mixin which will output a retina sprite (code below, if the gist is not showing up you can also find it here: https://gist.github.com/jornki/4034013).
To use it, simply pass the name of the sprite into the mixin. Let's say that one of the images in the "icons/" folder is named "liara.png". You want to display this image in a div called "hot-alien". The code for this would simply be "@include retina-sprite(liara);" Cool ey!?
Comments or questions? Ping me over at ADN..
