Simplified version (SASS syntax)

This mixin takes as its arguments the name of a sprited image (example: ‘button’), the sprite-map for standard displays, and the sprite-map for retina displays, which you can assign once as $sprites and $sprites2x and leave out in the rest of your SCSS/SASS.

I updated Pam Selle’s retina-optimized-sprite original mixin by adding +image-size

@mixin retina-sized-sprite($name, $map, $map2x)
  background-image: sprite-url($map)
  background-position: sprite-position($map, $name)
  background-repeat: no-repeat
  +image-size(sprite-file($map, $name))

  @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5)
    &
      $pos: sprite-position($map2x, $name)
      background-image: sprite-url($map2x)
      background-position: nth($pos, 1) nth($pos, 2) / 2
      @include background-size(ceil(image-width(sprite-path($map2x)) / 2) auto)

Usage example

$categories-icons: sprite-map("categories/icons/*.png")
$categories-icons-2x: sprite-map("categories/icons@2x/*.png")

.icon
  &.common
    +retina-sized-sprite(common, $categories-icons-active, $categories-icons-active-2x)
  &.travel
    +retina-sized-sprite(travel, $categories-icons-active, $categories-icons-active-2x)

Simplified version origin: http://thewebivore.com/compass-sprites-and-retina-displays-sass/

Advanced version (SCSS syntax)

@import "compass/utilities/sprites";         // Include compass sprite helpers
@import "compass/css3/background-size";      // Include helper to calc background size

@mixin retina-sprite($name, $hover: false, $active: false) {
  @include _retina-sprite($name, $sprites, $sprites2x, $hover, $active);
}

// 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, $hover, $active, $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 $hover == true {
    $name_hover: $name + _hover;
    &:hover {
      background-position: sprite-position($sprites, $name_hover, -$pad, -$pad);
    }
  }

  @if $active == true {
    $name_active: $name + _active;
    &:active {
      background-position: sprite-position($sprites, $name_active, -$pad, -$pad);
    }
  }

  @if $pad > 0 {
    padding: $pad;
  }

  @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
    & {
      $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);
      //  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

      @if $hover == true {
        $name_hover: $name + _hover;    // create myButton_hover and assign it
        &:hover{
          $pos: sprite-position($sprites2x, $name_hover, -$pad * 2, -$pad * 2);
          background-position: nth($pos, 1) nth($pos, 2) / 2;
        }
      }
      @if $active == true {
        $name_active: $name + _active;    // create myButton_active and assign it
        &:active{
          $pos: sprite-position($sprites2x, $name_active, -$pad * 2, -$pad * 2);
          background-position: nth($pos, 1) nth($pos, 2) / 2;
        }
      }
    }
  }
}