Compass で Retina 対応の Sprite 画像生成

CompassでCSS Sprite生成(手動生成、Retina対応) - 一から勉強させてください( ̄ω ̄;)

この辺りのエントリーを読んでも理解できなかったのだけど、必要な要素は分かったので Compass のドキュメント見ながら mixin を書いてみた。

$generatedImageDir: "path/to/img/";

@mixin sprite-img($map, $name) {
  background: $map;
  background-repeat: no-repeat;

  $path: sprite-path($map);
  background-size: (image-width(#{$generatedImageDir}#{$path}) / 2) (image-height(#{$generatedImageDir}#{$path}) / 2);

  $filepath: sprite-file($map, $name);
  width: (image-width($filepath) / 2);
  height: (image-height($filepath) / 2);

  $pos: sprite-position($map, $name);
  $pos-x: (nth($pos, 1) / 2);
  $pos-y: (nth($pos, 2) / 2);
  background-position: $pos-x $pos-y;

  display: block;
}

$generatedImageDir は Compass の設定で指定する generated_images_dir のパス。
2 で割ってるところは ceil() とか floor() とか要るんだろうか?
$map 引数には sprite-map() の戻り値のスプライトマップを指定する。$name 引数は画像名。

この mixin を使うには次のようなコード。disaply: block 以外を指定したい場合には mixin を使った後に display: inline-block; のように上書きする。

$imgs: sprite-map('imgs/*.png');

span.logo {
  @include sprite-img($imgs, logo);
}

Compass 超便利。今までスマホサイト実装するときでもいろいろ面倒くさくて Sprite 使う場面を限定してきたけど、これでかなり面倒な部分が解消される。

Last updated on July 17, 2015