CompassでSprite画像の書き出しをちょこっとカスタマイズ


Compassの大きな魅力のひとつ、Sprite画像の書き出し。
凄く素敵な機能ですが、
画像名からclass名が自動生成されちゃうのとかちょっとイヤなので、
もう少し私好みに出力してもらうためのカスタマイズ。

sprite/ 以下に対象のpng画像を入れておきます。
ここではimg_a.png、img_b.png、img_a_hover.png、img_b_hover.png、の4ファイルが入っている想定です。

[css]
$sprites: sprite-map("sprite/*.png");
$sprites-img:sprite-url($sprites);
@mixin sprite-background($name) {
height: image-height(sprite-file($sprites, $name));
width: image-width(sprite-file($sprites, $name));
background-position: sprite-position($sprites, $name);
}
@mixin sprite-background-pos($name) {
background-position: sprite-position($sprites, $name);
}
[/css]

とmixinを書いて、
お目当てのところに

[css]
a {
display: block;
background-image: $sprites-img;
&.class_a {
@include sprite-background(img_a);
&:hover {
@include sprite-background-pos(img_a_hover);
}
}
&.class_b {
@include sprite-background(img_b);
&:hover {
@include sprite-background-pos(img_b_hover);
}
}
}
[/css]

という感じに指定。
高さや幅も一定だったら、それもmixinに入れずに書くのが良いかも。

参照:

CSS Sprite Helpers for Compass | Compass Documentation
Compassでスプライト画象を高速に書き出す方法[to-R]