Retina Ready Background Mixin with Compass

gistfile1.scss

// 1.- This mixin works when you add class retina by JavaScript to html tag or when you use media queries
// 2.- This solution works with the sprites of http://compass-style.org/
// 3.- If your retina sprite have a diferente size with your regular sprite you can set the image with the folowing mixin:

$icons-retina: sprite-map("icons-retina/*.png");

@mixin background-retina($file-name) {
  background: $icons-retina; 
  $ypos: round(nth(sprite-position($icons-retina, $file-name), 2) / 2);
  background-position: 0 $ypos;
  @include background-size((image-width(sprite-path($icons-retina))/2) (image-height(sprite-path($icons-retina))/2));
  background-repeat: no-repeat;
}