Retina Sprites for Compass

retina-sprites.scss

// =====================================
// Retina Sprites for Compass
// =====================================
//
// Based in https://github.com/Gaya/Retina-Sprites-for-Compass
//
// Usage:
// 1. create two folders in your image directory (for example 'ebp' and 'ebp-2x').
// 2. create sprite images for pixel ratio 1 screens and put them in the first folder.
// 3. create sprite images for pixel ratio 2 screens and put them in the second folder, use the same filenames.
// 4. use the sprite-image in your scss file using: '@include use-sprite("ebp", play);',
//    where "ebp" is the folder name and play is the icon name
//

@mixin use-sprite($folder, $sprite) {

  $icons: sprite-map("#{$folder}/*.png", $layout: smart);
  $icons-2x: sprite-map("#{$folder}-2x/*.png", $layout: smart);

  background-image: sprite-url($icons);
  background-position: sprite-position($icons, $sprite);
  background-repeat: no-repeat;

  overflow: hidden;
  display: inline-block;
  vertical-align: middle;

  height: image-height(sprite-file($icons, $sprite));
  width: image-width(sprite-file($icons, $sprite));

  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: sprite-url($icons-2x);
    background-size: (image-width(sprite-path($icons-2x)) / 2) (image-height(sprite-path($icons-2x)) / 2);
    background-position: round(nth(sprite-position($icons-2x, $sprite), 1) / 2) round(nth(sprite-position($icons-2x, $sprite), 2) / 2);

    height: image-height(sprite-file($icons-2x, $sprite)) / 2;
    width: image-width(sprite-file($icons-2x, $sprite)) / 2;
  }
}