SASS mixin to display Compass sprites in both normal and High DPI versions.

high-dpi-sprite.scss

//
// Display a high-DPI sprite.
//
// @param $normal_image compass::sassextensions::sprites::spritemap
//   The normal-DPI sprite map. Will be used as a fallback.
// @param $highdpi_image compass::sassextensions::sprites::spritemap
//   The High DPI sprite map.
// @param $which_sprite Sass::Script::Value::String
//   The individual sprite to display.
// @param $background_color Sass::Script::Value::Color
//   The color to use as a background image. Defaults to transparent.
// @param $highdpi_media_query Sass::Script::Value::String
//   A string containing the media query to use.
//
@mixin high_dpi_sprite($normal_image, $highdpi_image, $which_sprite, $background_color: transparent, $highdpi_media_query: "screen and (min-resolution: 1.5dppx), screen and (min-resolution: 144dpi)") {
  // Determine the size of the original image. It's important because the size
  // of the containing element is based on the size of the original image.
  $normal_width: image-widcth(sprite-file($normal_image, $which_sprite));
  $normal_height: image-height(sprite-file($normal_image, $which_sprite));

  // Determine the size of the High DPI version so we can calculate the aspect
  // ratio.
  $retina_width: image-width(sprite-file($highdpi_image, $which_sprite));
  $retina_height: image-height(sprite-file($highdpi_image, $which_sprite));

  // Determine the ratios.
  $width_ratio: ($retina_width / $normal_width);
  $height_ratio: ($retina_height / $normal_height);

  // Set up the default sprite.
  background: sprite($normal_image, $which_sprite) no-repeat;
  background-color: $background_color;

  @media #{$highdpi_media_query} {
    // Use the High DPI image.
    background-image: sprite-url($highdpi_image);

    // Constrain the High DPI image to the size of the container. This ensures
    // it's not hilariously big.
    @include background-size($normal_width, $normal_height);

    // The sprite position is relative to the image, but we want it to be
    // relative to the size of the container so it gets placed properly.
    $pos: sprite-position($highdpi_image, $which_sprite);
    background-position: nth($pos, 1) / $width_ratio nth($pos, 2) / $height_ratio;
  }
}