ProgrammingHTML/CSS過去記事
過去記事

Compassで簡単にCSSスプライトを実現

簡単なCSSスプライトの作成

CSSスプライトは、ページ読み込みを高速化する目的で使われるテクニックで、多数の画像を一枚画像にまとめて、サーバへのリクエスト回数を少なくします。
画像とCSSだけで実現できますが、1枚画像から一部分だけを表示する必要がるため、CSS側での作業が煩雑になりやすいのが難です。

Compassはこのスプライト用の1枚画像を自動で作成したり、CSS設定を出力したりしてくれます。
Compassによるスプライト生成は非常に簡単で、様々な利用方法をサポートしています。

スプライト画像の生成

まず、プロジェクトの画像ディレクトリにiconというディレクトリを作成し、そこにアイコンを保存します。
config.rb の images_dir に images を指定していれば、画像の保存パスは下記になります。

images/icon

ここでは下記の画像を使います。

icon01
icon01.png

icon02
icon02.png

icon03
icon03.png

先ほどのディレクトリに上記の画像を保存すると、画像のパスは下記のとおりになります。

images/icon/icon01.png
images/icon/icon02.png
images/icon/icon03.png

画像を結合させるのは簡単で、SCSSファイルに下記の1文を記載するだけです。

@import "icon/*.png";

これで images_dir に指定したディレクトリ、images に結像した画像が生成されます。

icon-s33f62a118e

スプライトが増からのアイコンの削除や追加も簡単で、images/iconに保存した画像を削除、もしくは追加し、SCSSファイルを保存、もしくはKoalaなどでコンパイルすると再度スプライト画像が生成されます。

アイコン用 CSS の出力

画像を結合したままだと利用できないので、次に各アイコン毎の CSS を出力させます。
SCSSファイルに戻り、先の結合の指示の後にスプライトCSSを生成するMixinを追加します。

@include all-[ディレクトリ名]-sprites

書式は上記の通りで、[ディレクトリ名]にアイコン画像を設置しているディレクトリ名を指定します。
今回はiconというディレクトリに保存したので、@include all-icon-spritesになります。

@import "icon/*.png";
@include all-icon-sprites;

これで下記のような CSS が出力されます。

.icon-sprite, .icon-icon01, .icon-icon02, .icon-icon03 {
  background-image: url('/images/icon-s33f62a118e.png');
  background-repeat: no-repeat;
}

.icon-icon01 {
  background-position: 0 0;
}

.icon-icon02 {
  background-position: 0 -128px;
}

.icon-icon03 {
  background-position: 0 -256px;
}

出力例を見てもわかる通り、デフォルトではこれらの要素の横幅と縦幅が出力されません。
次のような変数を設定することで、横幅と縦幅を追加することができます。

$[ディレクトリ名]-sprite-dimensions: true;

先のコードに追加すると次のようになります。

$icon-sprite-dimensions: true;
@import "icon/*.png";
@include all-icon-sprites;

これで下記のような CSS が出力されます。

.icon-sprite, .icon-icon01, .icon-icon02, .icon-icon03 {
  background-image: url('images/icon-s33f62a118e.png');
  background-repeat: no-repeat;
}

.icon-icon01 {
  background-position: 0 0;
  height: 128px;
  width: 128px;
}

.icon-icon02 {
  background-position: 0 -128px;
  height: 128px;
  width: 128px;
}

.icon-icon03 {
  background-position: 0 -256px;
  height: 128px;
  width: 128px;
}

HTMLでアイコンを使いたい際は下記のような感じでクラス名を指定すると画像が表示されるようになります。

<div class="icon-icon01"></div>

この種の変数は他にも用意されていて、画像パーツの間隔を指定する $[ディレクトリ名]-spacing や、画像のレイアウトを指定する $[ディレクトリ名]-layout といった変数があります。
その他 sprite-map というヘルパーなども用意されていますが、上記で紹介した機能だけでも十分強力です。特殊な状況などで必要になった際に利用してみてください。

関連記事