compass-retina-sprites.sass

// Adapted from [mbilalsiddique1]'s comment on this gist:
// https://gist.github.com/alanhogan/2878758
//
// Note that sprites are ordered for first by file size (ascendingly) and then
// by name.
// https://github.com/chriseppstein/compass/issues/690#issuecomment-3729204

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

$icon-sprite-base-class: "%icon-sprite" !default
$icon-sprite-dimensions: false          !default
$icon-sprite-spacing:    10px           !default
$icon-sprite-position:   0%             !default
$icon-sprite-repeat:     no-repeat      !default

$icon-sprite-map-retina: sprite-map("icon-retina/*.png", $position: $icon-sprite-position, $spacing:  $icon-sprite-spacing * 2, $repeat: $icon-sprite-repeat)
$icon-sprite-map: sprite-map("icon/*.png", $position: $icon-sprite-position, $spacing: $icon-sprite-spacing, $repeat: $icon-sprite-repeat)

// All sprites should extend this class
// The icon-sprite mixin will do so for you.
#{$icon-sprite-base-class}
  background: $icon-sprite-map $icon-sprite-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), (min-resolution: 1.5dppx)
  #{$icon-sprite-base-class}
    background: $icon-sprite-map-retina $icon-sprite-repeat
    @include background-size(ceil(image-width(sprite-path($icon-sprite-map-retina)) / 2) auto)

// Extends the sprite base class and set the background position for the
// desired sprite. It will also apply the image dimensions if $dimensions is
// true.
@mixin icon-sprite($name, $dimensions: $icon-sprite-dimensions, $offset-x: 0, $offset-y: 0)
  @extend #{$icon-sprite-base-class}
  @include sprite($icon-sprite-map, $name, $dimensions, $offset-x, $offset-y)

example.scss

// Example Usage.
.icon-analytics
  @include icon-sprite(play_button)