Sprite しよう。
アイコンとかボタンとかを Photoshop とかでひとつの画像にしなくても、Compass がやってくれる。
さらに background プロパティも自動で書いてくれる。
CSS Sprite Generator みたいなことを Comapss がやってくれるのでとても楽。
公式サイトの Spriting with Compass を見てみると、その手順が書いてある。
Setup
For this tutorial, let's imagine that in your project's image folder there are four icons:
images/my-icons/new.png
images/my-icons/edit.png
images/my-icons/save.png
images/my-icons/delete.png
要はまずは画像を用意して、 『images』フォルダ内に 『my-icons』フォルダを作って、画像を入れる。
次に sass/screen.css に以下のように記述する。
@import "my-icons/*.png";
@include all-my-icons-sprites;
そしてコンパイル。
そうすると css/screen.css に以下のように書きだされる。
.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
.my-icons-delete { background-position: 0 0; }
.my-icons-edit { background-position: 0 -32px; }
.my-icons-new { background-position: 0 -64px; }
.my-icons-save { background-position: 0 -96px; }
いちいち画像のサイズ調べて css sprite 用の css 書いたりしなくてもOK。
必ずしも『my-icons』というフォルダ名にしなくても大丈夫。そこは任意の名前で問題ない。
ただし、@include all-my-icons-sprites; の my-icons のところをフォルダ名とあわせる。
次はもうちょっと実際に使う時に落とし込んだことを書く。