Compassでさくっとスプライトを作る方法

スプライトってめんどうですよね・・・。
HTTPリクエスト数を少なくさせるのでページの読み込みが早くなるといううのは良いんですが、
作る方としてはとってもめんどうです。
某案件では、さすがに量も多いし・・・ということでCSS Sprite Generatorを使ってたのですが、画像の書き出しをミスってしまうとあまり効率的ではなかったり・・・。
そんなわけで、Compassでさくっとスプライトを作る方法についてです。

スプライト画像作成

SCSS

//ディレクトリを指定
//書き方:@import "ディレクトリ/*.png";
@import "img/sprite/*.png";

これだけでimgフォルダ内に結合されたファイルが勝手にできます。
例 sprite-s8e8b8934fb.png

このときCSS側にも生成されたファイルのパスをリンクしてくれてます。

CSS

.sprite-sprite {
  background: url('/img/sprite-s8e8b8934fb.png') no-repeat;
}

クラス出力

SCSS

//画像用のクラスを出力
//書き方 @include all-ディレクトリ名-sprites(文字列);
@include all-sprite-sprites(i);

CSS

.sprite-sprite, .sprite-a, .sprite-b, .sprite-c {
  background: url('/img/sprite-s8e8b8934fb.png') no-repeat;
}

.sprite-a {
  background-position: 0 0;
  height: 50px;
  width: 50px;
}

.sprite-b {
  background-position: 0 -100px;
  height: 50px;
  width: 50px;
}

.sprite-c {
  background-position: 0 -50px;
  height: 50px;
  width: 50px;
}

@include all-sprite-sprites(i);じゃなくて、
@include all-sprite-sprites;とすると縦・横幅の値無し版ができます。

CSS

.sprite-sprite, .sprite-a, .sprite-b, .sprite-c {
  background: url('/img/sprite-s8e8b8934fb.png') no-repeat;
}

.sprite-a {
  background-position: 0 0;
}

.sprite-b {
  background-position: 0 -100px;
}

.sprite-c {
  background-position: 0 -50px;
}

スプライトに関して便利そうなMixinをちらほら見かけたのですが、
パッと見よくわからない記述があったので、公式の方を参考にして分かり次第また詳しく書いておこうかと思います。