楽して時間短縮！Compassで作ったスプライト画像でRetina対応を行う方法

モモコ

2013.06.20

Web制作

こんにちは。UFOキャッチャー運が急降下中、デザイナーのももこです。
輪っかがついたキーホルダー系をうまく取れるようになりたい…(´・ω・｀)

気を取り直して、今回はCompassを使って作ったCSSスプライト画像でRetina対応を行う方法をご紹介します。

Compassを使って書き出したスプライト画像を自動でRetina対応にさせる

スプライト画像の生成

$sprites: sprite-map("sprites/*.png");
$sprites-img:sprite-url($sprites);

まずはスプライト画像を生成します。
単一の画像をフォルダに入れると、見事に合体したスプライト画像がimagesフォルダに書き出されます。
sprite-mapにはconfig.rbで指定したimagesフォルダ以下のルートを入れて下さい。

Mixinを記述する

@mixin sprite-background($name) {
     background-image: $sprites-img;
     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(100px auto);
}

続いてRetina対応用のMixinを書きます。
background-sizeには書き出したスプライト画像の半分の値を随時入れて下さい。

画像を使うSCSSを設定する

#hogehoge{
     @include sprite-background(hogohoge);
}

最後に画像を表示させるためのSCSSを設定します。
()内には単一の画像名を入れてください。

完成形のCSSはこちら

実際に書き出されるCSSは以下になります。

#hogehoge {
  background-image: url('images/sprites-abcdefg1234.png');
  background-repeat: no-repeat;
  display: block;
  height: 20px;
  width: 50px;
  background-position: 0 -300px;
  -webkit-background-size: 100px auto;
  -moz-background-size: 100px auto;
  -o-background-size: 100px auto;
  background-size: 100px auto;
}

弊社インターンの王が書いていたCompassの基礎から応用までの記事にある通り、デフォルトでは画像のパスが絶対パスになっているので適宜変更を行ってください。

スプライト生成機能を使う上での注意点

スプライト画像の名前から英数字を削除する

また、画像を追加削除する度にファイル名の後ろに付く英数字が変わってしまい、フォルダ内に古いスプライト画像が大量に残って困ったので解決策も合わせてご紹介します。

# Make a copy of sprites with a name that has no uniqueness of the hash.
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end

# Replace in stylesheets generated references to sprites
# by their counterparts without the hash uniqueness.
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end

こちらの記述をconfig.rbに追記し再起動を行ってください。
若干変更に時間が掛かる場合がありますので、気長に待つと吉です。