スマホサイト用に、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);