Responsive sprites

gistfile1.sass

// In _base.scss

//
// Sprites
$icons: sprite-map("icons/standard/*.png");
$icons-2x: sprite-map("icons/retina/*.png");



// _mixins.scss
@mixin image-dims($sprite, $image) {
  height: image-height(sprite-file($sprite, $image));
  width: image-width(sprite-file($sprite, $image));
}

//
// Responsive sprite solution
// This gets passed a low rez and a high rez Compass sprite and will render
// the needed media queries for both. This creates both a max and min resolution
// breakpoint so only the needed sprite is getting served
@mixin r-sprite($lo-rez, $hi-rez, $img, $rez: 2dppx) {
  // Standard resolution
  @include breakpoint(max-resolution $rez) {
    background-image: sprite-url($lo-rez);
    background-position: sprite-position($lo-rez, $img);
    background-repeat: no-repeat;
  }

  // High resolution
  @include breakpoint(min-resolution $rez) {
    // Get the Y position of the shrunk image
    $ypos: nth(sprite-position($hi-rez, $img), 2) / 2;
    background-image: sprite-url($hi-rez);
    background-repeat: no-repeat;
    background-position: 0 $ypos;
    background-size: image-width(sprite-path($hi-rez))/2 auto;
  }

  // Standard resolution
  // IE8 support
  .lt-ie9 & {
    background: sprite($lo-rez, $img) no-repeat !important;
  }
}