sprite-mixin.scss

////////////////////////////////////////////////////////////////////////////////
// Base icon
////////////////////////////////////////////////////////////////////////////////
.icon {
  @include hide-text;
  display: inline-block;

  //////////////////////////////////////////////////////////////////////////////
  // Icon modifiers
  //////////////////////////////////////////////////////////////////////////////
  &.-middle {
    vertical-align: middle;
  }
}


////////////////////////////////////////////////////////////////////////////////
// Sprite Mixin
////////////////////////////////////////////////////////////////////////////////
@mixin retina-sprite($path, $name, $icons-prefix: "icon--#{$name}-") {
  $icons: sprite-map("#{$path}/*.png", $layout: vertical, $cleanup: false, $spacing: 10px);
  $icons-2x: sprite-map("#{$path}-2x/*.png", $layout: vertical, $cleanup: false, $spacing: 10px);

  %#{$name}-sprite {
    background: $icons no-repeat;

    @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) {
      background: $icons-2x no-repeat;
      background-size: ceil(image-width(sprite-path($icons-2x)) / 2) auto;
    }
  }

  $sprite-url: sprite-url($icons);
  $sprite-url-2x: sprite-url($icons-2x);

  @each $sprite-name in sprite_names($icons) {
    $full-sprite-name: "#{$icons-prefix}#{$sprite-name}";
    .#{$full-sprite-name} {
      @extend %#{$name}-sprite;
      background-image: $sprite-url;
      background-position: sprite-position($icons, $sprite-name);

      @include sprite-dimensions($icons, $sprite-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($icons-2x, $sprite-name);
        background-image: $sprite-url-2x;
        background-position: nth($pos, 1) ceil(nth($pos, 2)/2);
      }
    }
  }
}

@include retina-sprite("icons", "icons", $icons-prefix: "icon.-");