CompassでCSSスプライトを自動化するメモ

background-sizeが使える環境(IE8を切れる環境)で、
Retinaなケースを考えて作る場合。(画像は@2xサイズで用意する)

・compassは最新のアルファ版を使うと良い (2013.4.14現在)

gem install compass --pre

Sprites are compiled in every call to sprite · Issue #897 · chriseppstein/compass

・pngの生成を高速化すっるには、oily_pngを入れると良い

gem install oily_png

パフォーマンスからみるSass/Compass 第2回：CompassによるCSS Sprite | MOL

・該当ディレクトリでターミナルから、監視開始

compass watch

・CompassのMixin

// スプライト画像
@mixin sprite-background($sprites, $sprites-img, $name) {
  background-image: $sprites-img;
  background-repeat: no-repeat;
  display: block;
  height: ceil(image-height(sprite-file($sprites, $name)) / 2);
  width: ceil(image-width(sprite-file($sprites, $name)) / 2);
  $ypos: ceil(nth(sprite-position($sprites, $name), 2) / 2);
  background-position: 0 $ypos;
  @include background-size(ceil(image-width(sprite-path($sprites)) / 2) auto);
}

$sprites: sprite-map("/common/sprite/*.png", $spacing: 4px);
$sprites-img: sprite-url($sprites);

#icon-large .sprite{
  @include sprite-background($sprites, $sprites-img, 'icon-large');
}

こんな感じ。

参考:
続☆Compassでさくっとスプライトを作る方法
Compassで複数のSprite画像を扱う
Using Compass to generate normal and retina sprite maps

background-sizeが使えないwebサイト制作時なんかを考えると、別の方法も必要になるので、後日検討。