Sass/Compassを使ってCSSスプライトに挑戦してみました。

CSSスプライトを作成する機会があったため、最近よく耳にするSassとCompassを使ってみました。CSSスプライトとは、複数の画像を１枚の画像としてまとめ、CSSで表示範囲を指定することにより表示する手法です。画像のリクエスト数を削減することができるため、高速化の手法の１つとして利用されています。

Sass/Compassについて

　Sassとは、CSSの拡張メタ言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。独自の文法といっても、CSSをそのまま書くこともできますし、CSSをベースに拡張されているので学習コストは低いです。変数や演算、ミックスインと呼ばれる関数のような仕組みや継承、条件式などの文法があり、CSSの冗長性や保守性、生産性の悪さを解消することができます。公式サイトは英語ですが、enja-ossというプロジェクトでリファレンスの日本語訳が進められているようです。
　次にCompassとは、sassのフレームワークで、様々なミックスインやスタイルが用意されています。CSSスプライトをはじめ、ベンダープレフィックスを自動で追加してくれたり、sassファイルの変更を監視して自動でコンパイルしたりと便利な機能が満載です。今回は、このCompassのCSSスプライトの機能を使ってみます。Sass/Compassのインストール、設定ファイルの記述については割愛します。

CompassでCSSスプライト

　CSSスプライトを生成するためには、まずSass管理下の画像ディレクトリ内に任意のディレクトリを作成し、スプライトの元となる画像を用意します。今回は以下のような構成で画像を用意しました。

続いて、.scssファイルを用意します。最低限書かなければいけないのは、以下の４行です。この４行で、指定したフォルダ内の画像をCSSスプライト画像にまとめ、表示用クラスを生成することができます。

　@charset “utf-8”;
　@import “compass”;
　
　// スプライト画像を生成
　@import “icons/*.png”;
　// 各画像の表示用クラスを生成
　@include all-icons-sprites();

このsassファイルをコンパイルすると、３つの画像を縦方向１列にまとめた画像（icons-s845e2a1d5b.png）と、以下のCSSが生成されます。クラス名は、「ディレクトリ名-ファイル名」になります。

icons-s845e2a1d5b.png

　.icons-sprite, .icons-cat, .icons-lion, .icons-panda {
　　　background: url(‘/images/icons-s845e2a1d5b.png’) no-repeat;
　}
　
　.icons-cat {
　　　background-position: 0 -100px;
　}
　
　.icons-lion {
　　　background-position: 0 0;
　}
　
　.icons-panda {
　　　background-position: 0 -200px;
　}

クラス名は保持したままbackground-positionの値を変更したい

　ただ、Retinaディスプレイ対応などbackground-positionの値を元の画像のサイズではなく別の値に変更したい場合、上記だけでは対応できません。そこで、mixinを作成します。クラス名の「ディレクトリ名-ファイル名」というルールは保持したいので、スプライトの元画像のファイル名のクラス名のCSSを出力する処理を書いてみます。sprite-names($map)でスプライトの個々の名前を取得することができるので、これを利用します。

　　　　@charset “utf-8”;
　　　　@import “compass”;
　
　　　　@import “icons/*.png”;
　　　　$spr-imgs: sprite-map(“icons/*.png”);
　
　　　　// 2倍に拡大して表示する用にbackground-positionを指定するmixin
　　　　// 今回は低解像度で表示したいため２倍にしていますが、retina対応の場合1/2になります。
　　　　//　「compass sprite retina」で検索すると色々な方がmixinを書かれています。
　　　　@mixin low-reso-sprites($name){
　
　　　　　　// heightとwidthも出力してみます
　　　　　　height: image-height(sprite-file($spr-imgs, $name))*2;
　　　　　　width: image-width(sprite-file($spr-imgs, $name))*2;
　　
　　　　　// background-positionを計算して変数に保持します
　　　　　　$ypos: round(nth(sprite-position($spr-imgs, $name), 2) *2);
　　　　　　background-position: 0 $ypos;
　　　　}
　
　　　　// 画像の数分のクラスを出力します
　　　　@each $sprite-name in sprite-names($spr-imgs) {
　　　　　.#{$sprite-name} {
　　　　　　@include low-reso-sprites($sprite-name);
　　　　　}
　　　　}

この.scssファイルをコンパイルすると、以下のようなcssが作成されます。

　.icons-sprite {
　　　background: url(‘/sass/images/icons-s845e2a1d5b.png’) no-repeat;
　}
　
　.icons-cat {
　　　height: 200px;
　　　width: 200px;
　　　background-position: 0 -200px;
　}
　
　.icons-lion {
　　　height: 200px;
　　　width: 200px;
　　　background-position: 0 0;
　}
　
　.icons-panda {
　　　height: 200px;
　　　width: 200px;
　　　background-position: 0 -400px;
　}

background-positionの値を変更することが出来ました！上記のクラスを実際に適用する要素では、background-sizeで背景画像のサイズを２倍にして使用しました。
　

容量比較

　CSSスプライト化すると、どれだけ容量が削減できるのか比較してみます。以下は１５個のオリジナル画像（PNG）をCSSスプライト化した結果です。画像とCSSを合わせても、約３分の１に容量を削減することができました。