Gruntの使い方：CompassでCSSスプライトを自動生成する

実はGruntは関係なくてCompass単体の機能なのですが、前々回GruntでCompassを自動処理できるようにしたので、scssファイルに記述を追加するだけでCSSスプライトを自動生成できます。

下記のフォルダ構成を前提とします。

project
├css
├sass
├img
│└icons
│  ├aaa.png
│  ├bbb.png
│  └ccc.png
├config.rb
├package.json
└Gruntfile.js

またconfig.rbでは images_dir に img フォルダが設定されている前提です。

sassフォルダ内の適当なscssファイルに下記の記述を追加。

@import "icons/*.png";
$sprites: sprite-map("icons/*.png");
@include all-icons-sprites();
.icons-sprite {
  display: inline-block;
  width: 16px;
  height: 16px;
}

1行目はCSS出力ではなく、icons フォルダ内の画像を結合し img フォルダ内に生成。
2行目は結合生成された画像を背景画像に設定したCSS出力。
3行目はアイコン個別の background-position をCSS出力。
4行目はアイコンを形作るためのクラス。

CSS側には下記のように出力されます。

.icons-sprite, .icons-aaa, .icons-bbb, .icons-ccc {
  background: url('../img/icons-***.png') no-repeat;
}
.icons-aaa {
  background-position: 0 0;
}
.icons-bbb {
  background-position: 0 -16px;
}
.icons-ccc {
  background-position: 0 -32px;
}
.icons-sprite, .icons-aaa, .icons-bbb, .icons-ccc {
  display: inline-block;
  width: 16px;
  height: 16px;
}