Retina ready sprites with SASS

icons.scss

@import "compass/utilities/sprites";
@import "compass/css3/background-size";

@mixin all-2x-sprites($map, $map2x) {
  @media (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5),
    (min-resolution: 1.5dppx) {

    $base-class: sprite-map-name($map);

    .#{$base-class}-all-retina-sprites {
      background-image: sprite-url($map2x);
    }

    @each $sprite in sprite-names($map) {
      $pos: sprite-position($map2x, $sprite);
      .#{$base-class}-#{$sprite} {
        @include retina-sprite($map2x, $sprite);
      }
    }
  }
}

@mixin retina-sprite($map2x, $sprite) {
  $max-width: 0;
  @each $sprite in sprite-names($map2x) {
    $sprite-width: image-width(sprite-file($map2x, $sprite));
    @if ($sprite-width > $max-width) {
      $max-width: $sprite-width;
    }
  }

  $pos: sprite-position($map2x, $sprite);
  background-image: sprite-url($map2x);
  background-position: nth($pos, 1) nth($pos, 2)/2;
  @include background-size(ceil($max-width / 2), auto);
  width: image-width(sprite-file($map2x, $sprite)) / 2;
  height: image-height(sprite-file($map2x, $sprite)) / 2;
}

// Helpers
// ----------------------------------------
@mixin icon-retina-sprite($sprite) {
    @include retina-sprite($icons2x-sprites, $sprite);
}

// Sprite set: General
// ----------------------------------------
$icons-spacing: 2px;
$icons-sprite-dimensions: true;
@import "sprites/icons/*.png";
@include all-icons-sprites;

$icons2x-sprite-dimensions: true;
@import "sprites/icons2x/*.png";
@include all-2x-sprites($icons-sprites, $icons2x-sprites);