gistfile1.txt

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

// Define the sprites here. Notice that I've added an optional spacing.
$sprites: sprite-map("my-sprites/*.png", $spacing: 20px);
$sprites2x: sprite-map("my-sprites-retina/*.png", $spacing: 40px);

// Now let's define the sprite mixin.
// This delegates to the reusable retina-sprite mixin.
@mixin sprite($name){
  @include retina-sprite($name, $sprites, $sprites2x)
}

// The general purpose retina sprite mixin.
//
//    @include retina-sprite(name, $spritemap1, $spritemap2)
//    @include retina-sprite(name, $spritemap1, $spritemap2[, $dimensions: true, $pad: 0])
//
//    If `dimensions` is true, then width/height will also be set.
//
//    if `pad` is non-zero, then that's how much padding the element will have (requires
//    $spacing on the sprite maps). Great for iPhone interfaces to make hit areas bigger.
//
@mixin retina-sprite($name, $sprites, $sprites2x, $dimensions: true, $pad: 0) {
  @if $dimensions == true {
    @include sprite-dimensions($sprites, $name);
  }
  background-image: sprite-url($sprites);
  background-position: sprite-position($sprites, $name, -$pad, -$pad);
  background-repeat: no-repeat;
  @if $pad > 0 {
    padding: $pad;
  }
  // UNCOMMENT THIS WHEN RETINA IMAGES ARE READY!
  @media (#{-webkit-min-device-pixel-ratio}: #{1.6}), (#{min--moz-device-pixel-ratio}: #{1.6}), (#{-o-min-device-pixel-ratio}: #{3 / 2}), (#{min-device-pixel-ratio}: #{1.6}) {
    & {
      $pos: sprite-position($sprites2x, $name, -$pad * 2, -$pad * 2);
      background-image: sprite-url($sprites2x);
      background-position: nth($pos, 1) nth($pos, 2) / 2;
      @include background-size(ceil(image-width(sprite-path($sprites2x)) / 2), auto);
      // ^-- this is the "smarter" way to do this.
      //     sprite-path() returns the path of the generated sprite sheet, which
      //     image-width() calculates the width of. the ceil() is in place in case
      //     you have sprites that have an odd-number of pixels in width (which
      //     you shouldn't in the first place)

    }
  }
}