Compassの大きな魅力のひとつ、Sprite画像の書き出し。
凄く素敵な機能ですが、
画像名からclass名が自動生成されちゃうのとかちょっとイヤなので、
もう少し私好みに出力してもらうためのカスタマイズ。
sprite/ 以下に対象のpng画像を入れておきます。
ここではimg_a.png、img_b.png、img_a_hover.png、img_b_hover.png、の4ファイルが入っている想定です。
$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);
}
とmixinを書いて、
お目当てのところに
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);
}
}
}
という感じに指定。
高さや幅も一定だったら、それもmixinに入れずに書くのが良いかも。
参照:
CSS Sprite Helpers for Compass | Compass Documentation
Compassでスプライト画象を高速に書き出す方法[to-R]