SassフレームワークのCompassでCSS Spriteが簡単にできる

Sassのことばっかりかいてるんですけど、html5+α@福岡 勉強会で珍しく発表したり、仕事で久々にsassばっかり触ってるのもあるんだと思います。
そんなSassをお勧めする理由の一つがCompassというCSS Frameworkなんです。
便利なMixinやらFunctionやらあるんですけど、一番うれしいのが面倒なCSS Spriteを自動化できることでしょうか。

例えばhogeというディレクトリにSpriteしたい画像を格納しておけば、
[code]
$sprite: sprite-map("hoge/*.png");
[/code]

で画像を結合してくれます。

ファイルの結合にはオプションをつけることで色々とできて、
例えば、各画像ファイルの間隔をあけて結合させたいときは、
[code]
$sprite: sprite-map("hoge/*.png", $spacing: 20px);
[/code]

で20pxの間隔をあけてファイルを結合できます。

水平に結合したときは
[code]
$sprite: sprite-map("hoge/*.png", $layout:horizontal);
[/code]

とかでいいし、便利で楽。

実際に画像を表示したいところで
[code]
background-image: $sprite;

第二引数はファイル名

background-position: sprite-position($sprite, file-name);
[/code]
とかでpositionを自動で算出してくれます。

下記のようすると、ファイルの縦幅と横幅を取得してwidthとheightに設定できます。
[code]
width: image-width("hoge/file-name.png");
height: image-height("hoge/file-name.png");
background-image: $sprite;
background-position: sprite-position($sprite, file-name);
[/code]
これだと、画像の変更がありファイルの縦幅や横幅が変わっても、特に修正の必要がないのでかなり楽です。

そのほかにも色々できるんですけど、気がついたら追記します。
でも、詳しくは一回チュートリアルやればいいんじゃないかな。