CompassでRetina対応のCSS Spriteを出力する方法

$sprites: sprite-map("sprites/*.png");

@mixin sprite-background($name) {
  background-image: sprite-url($sprites);
  background-repeat: no-repeat;
  display: inline-block;
  height: image-height(sprite-file($sprites, $name)) / 2;
  width: image-width(sprite-file($sprites, $name)) / 2;
  $ypos: round(nth(sprite-position($sprites, $name), 2) / 2);
  background-position: 0 $ypos;
  @include background-size(300px auto);
}

@include background-size((hoge1 / 2)+px auto);のhoge1の部分にはSpriteフォルダ内に入っている一番横幅の大きい画像サイズを指定する。

表示させる際は

@import sprite-background(hoge2)

と入力する。
"hoge2"には表示したい画像ファイル名（拡張子を除く）を入力

---

参考サイト

• CompassでCSSスプライト（Retina対応） |  clear sky source
• CompassでCSSスプライト[to-R]