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


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]


この記事を書いた人