gistfile1.scss

@mixin sprite($item_name, $hover_state: false, $active_state: false, $dimensions: true, $spacing: 0) {
  @include retina-sprite($item_name, $sprites, $sprites_retina, $hover_state, $active_state, $dimensions, $spacing);
}

@mixin retina-sprite($item_name, $sprites, $sprites_retina, $hover_state, $active_state, $dimensions, $spacing) {
  $hover_state: false !default;
  $active_state: false !default;
  $dimensions: true !default;
  $media-queries: "(-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi), (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
  background: sprite-url($sprites) sprite-position($sprites, $item_name, $spacing, $spacing) no-repeat;
  @if $hover_state {
    $item_name_hover: $item_name + _hover;
    &:hover {
      background-position: sprite-position($sprites, $item_name_hover, $spacing, $spacing);
      @media #{$media-queries} {
        $item_name_hover: $item_name + _hover;
        $sprite_position: sprite-position($sprites_retina, $item_name_hover, $spacing * 2, $spacing * 2);
        background-position: nth($sprite_position, 1) / 2 nth($sprite_position, 2) / 2;
      }
    }
  }
  @if $active_state {
    $item_name_active: $item_name + _active;
    &:active {
      background-position: sprite-position($sprites, $item_name_active, $spacing, $spacing);
      @media #{$media-queries} {
        $item_name_active: $item_name + _active;
        $sprite_position: sprite-position($sprites_retina, $item_name_active, $spacing * 2, $spacing * 2);
        background-position: nth($sprite_position, 1) / 2 nth($sprite_position, 2) / 2;
      }
    }
  }
  @if $spacing > 0 {
    padding: $spacing;
  }
  @if $dimensions {
    @include sprite-dimensions($sprites, $item_name);
  }
  @media #{$media-queries} {
    & {
      $sprite_position: sprite-position($sprites_retina, $item_name, $spacing * 2, $spacing * 2);
      background: sprite-url($sprites_retina) nth($sprite_position, 1) / 2 nth($sprite_position, 2) / 2 no-repeat;
      @include background-size(ceil(image-width(sprite-path($sprites_retina)) / 2) auto);
    }
  }
}