retina対応のsprite画像をbackground-imageに表示するのに便利なcompassの記述

スマホサイト用に、compassでsprite画像を生成して、background-imageに表示させるmixinは使ってたのですが、
sprite画像を複数使う時どうしよってなったので、
調べてみた。

下記のサイトを参考に、ちょっと改良しました。

参考のサイトは、それぞれのクラスでサイズを指定するのが、ちょっとめんどくさい。
なので、sprite画像を生成する段階で、spriteの最大横幅を変数に入れて、mixinの引数に渡しています。
まあ、あとで画像追加して横幅が変わったら、手動で変えなきゃならないのですが…。

mixinを作る

@mixin sprite-bg-retina($name, $sprites, $spriteSize) {
     background-image: $sprites;
     background-repeat: no-repeat;
     display: block;
     height: image-height(sprite-file($sprites, $name)) / 2;
     width: image-width(sprite-file($sprites, $name)) / 2;
     $ypos: round(nth(sprite-position($sprites, $name), 2) / 2);
     background-position: 0 $ypos;
     @include background-size(spriteSize auto);
}

sprite画像を作る

/* sprite01 */
$spriteFiles01: sprite-map("icon01/*.png");
$spriteURL01: sprite-url($sprites-icon01);
$spriteSIZE01: 200px; //sprite画像の最大横幅の半分

/* sptrite02 */
$spriteFiles02: sprite-map("detail/UI/*.png");
$spriteURL02: sprite-url($sprites-detail-UI);
$spriteSIZE02: 310px; //sprite画像の最大横幅の半分

該当の背景画像を表示させたいclassに記述

@include sprite-bg-retina('画像名', $spriteURL00, $spriteSIZE00);

参考サイト