実は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; }