Mixin that generates both a regular and retina sprite (using the Compass Sprite Helpers) and returns the appropriate declarations and media queries.

_retina-sprite.scss

// Mixin that generates both a regular and retina sprite (using the Compass Sprite Helpers) and returns the appropriate declarations and media queries.
//
// $folder - The name of the folder that contains the icons to sprite.
// $width  - The width of an individual icon. Defaults to the width of the sprite.
// $height - The height of an individual icon. Defaults to the same as the width.
//
// No styleguide reference.

@mixin retina-sprite($folder, $width: image-width(sprite-path($sprites)), $height: $width) {
  $sprites: sprite-map("icons/#{$folder}/*.png"); // Generates a sprite containing every icon in the supplied folder.
  $sprites-2x: sprite-map("icons/#{$folder}@2x/*.png"); // Generates a second sprite containing every icon @2x resolution.

  background-image: sprite-url($sprites);
  background-repeat: no-repeat;
  height: #{$height}px;
  @include inline-block;
  text-indent: -9999px;
  width: #{$width}px;
  @each $sprite in sprite-names($sprites) {
    &.#{$sprite} { background-position: sprite-position($sprites, $sprite); }
  }
  @media (min-resolution: 2dppx), (min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (-webkit-min-device-pixel-ratio: 2) {
    background-image: sprite-url($sprites-2x);
    @include background-size(#{$width}px auto);
  }
}

// Example

.icons-example {
  @include retina-sprite(icons-folder);
}