Compass sprites for retina assets.

_extendables.scss

/*
  I like to set up some extendable classes to keep the bulk of my sprite setup outside of my generated CSS.
*/
/*
  Button sprite extendable.
*/
%button-sprite {
  background-image: $button-sprite;
  
  @include retina {
    background-image: $button-2x-sprite;
    background-size: image-width(sprite-path($button-sprite)) image-height(sprite-path($button-sprite));
  }
}

/*
  Logo sprite extendable.
*/
%logo-sprite {
  background-image: $logo-sprite;
  
  @include retina {
    background-image: $logo-2x-sprite;
    background-size: image-width(sprite-path($logo-sprite)) image-height(sprite-path($logo-sprite));
  }
}

_mixins.scss

/*
  Set up an element to use a sprite.
*/
@mixin use-button-sprite($sprite) {
  @extend %button-sprite;
  
  @include squish-text;
  @include sprite-setup($button-sprite, $sprite);
}

/*
  Set up an element to use a sprite.
*/
@mixin use-logo-sprite($sprite) {
  @extend %logo-sprite;

  @include squish-text;  
  @include sprite-setup($logo-sprite, $sprite);
}

/*
  Sprite setup mixin.
  @param {String} $map Sprite map name.
  @param {String} $name Sprite name.
*/
@mixin sprite-setup($map, $name) {
  width: image-width(sprite-file($map, $name));
  height: image-height(sprite-file($map, $name));
  background-position: sprite-position($map, $name);
}

/*
  Retina mixin.
*/
@mixin retina($ratio: 1.3) {
  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
  only screen and (min--moz-device-pixel-ratio: $ratio),
  only screen and (-o-min-device-pixel-ratio: ($ratio * 10) / 10),
  only screen and (min-resolution: #{round($ratio * 96)}dpi),
  only screen and (min-resolution: #{$ratio}dppx) {
    @content;
  }
}

_usage.scss

/*
  And here's what it looks like to use the logo sprite map.
*/
.logo {
  @include use-logo-sprite('logo');

  display: block;
}

.button {
  @include use-button-sprite('button');

  display: block;
}

intro.md

Intro

This technique requires a few different steps. I typically use my style.scss as my 'base' file (as demonstrated in the Compass best practices page in the docs), and that's where I do my sprite config and imports.

Because Sass 3.2 doesn't yet have variable interpolation, you'll have to set up mixins and extendable classes for each type of sprite you're using.

In this example, I have two sprite maps, 'button' and 'logo'.

style.scss

/*
  Here's where I do my main Sprite config work. Import the sprites you want to use, and set the layout to be vertical or horizontal, which are the only two I've found to generate sprites in the same exact order every time.

  The order in which the sprite files are placed into the sprite are based on file name, so whatever order the files are in when you `ls` is how it's going to look in the sprite file.
*/

/* Sprite config. */
$type: horizontal;

/* Sprite import. */
$button-sprite: sprite-map('button/*.png', $layout: $type);
$button-2x-sprite: sprite-map('button-2x/*.png', $layout: $type);
$logo-sprite: sprite-map('logo/*.png', $layout: $type);
$logo-2x-sprite: sprite-map('logo-2x/*.png', $layout: $type);