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]