Compassを使う！(独自機能)にチラっと書いていますが、
もっと詳しく！Compassで作るスプライト画像について！

基本的な使い方

まず、imgaeファイルが入っているディレクトリに、スプライト画像用のディレクトリを作成します。

例えば、アイコンをまとめたスプライト画像を作るとして、ディレクトリ名をiconにします。

その中に、スプライト化したい画像をホイホイ入れていきます。

   

構造的にこうなりますね。(※imgディレクトリ内の場合)

img/icon/blue.png
img/icon/red.png
img/icon/yellow.png

次にSCSSファイルにこれを書きます。

@import "icon/*.png";  //iconの所は自分が作ったディレクトリ名

これを書いてコンパイルすると、ターミナルに

create img/icon-s7b2f1a9a3d.png

と表示されます。（数字のとこは色々）

これは「imgディレクトリの中にicon-s7b2f1a9a3d.pngっていうスプライト画像を作ったよ！」っていうことですね。

 

その通り、imgディレクトリの中に

上記名前のスプライト画像が作られています。

じゃんっ！

書き出されたcssはこれ。

.icon-sprite {
  background: url('/img/icon-s7b2f1a9a3d.png') no-repeat;
}

ｆｍｆｍなるほど。

続きまして。SCSSファイルに以下を記述。

@include all-icon-sprites;  //iconの所は自分が作ったフォルダ名

コンパイルするとcssはこのように書き出されます。

.icon-sprite, .icon-blue, .icon-red, .icon-yellow {
  background: url('../img/icon-s7b2f1a9a3d.png') no-repeat;
}

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

.icon-red {
  background-position: 0 -50px;
}

.icon-yellow {
  background-position: 0 -100px;
}

各スプライト画像にはフォルダ名-ファイル名のクラス名が自動で指定されています。

これを使いたい場所のclass名に指定するか、@extendするかで使えますよ！
が、前回までのお話。

【応用】sprite-map

 

基本の方で作られたスプライト画像って、

各画像がきっちきちに配置されているので使いにくいですね。

 

それを、自分がほしいように作ってくれるのがsprite-map！（かっこいい！）

まず書き方

$icon: sprite-map("icon/*.png", [$option]); 

任意の変数(上の場合$icon)に、sprite-mapをいれます。

引数に入っている icon/*.png は基本と同じですね。
iconディレクトリに入れたpngファイルを、これで結合してスプライト化します。

続けてカンマ区切りで設定できるオプション。

$spacing //画像と画像間の余白(px)
$position //x軸に沿ったスプライトの位置(%)
$layout //スプライトの並べ方

 

$layoutで設定できるのは、
縦方向に並べるvertical(デフォルト)
横方向に並べるhorizontal
斜めに並べるdiagonal($position, $spacingは無視されます)
余白なく並べるsmart($position, $spacingは無視されます)
があります。

例えばで色々作ってみると、

$icon: sprite-map("icon/*.png", $spacing:30px, $position: 0%, $layout: horizontal); 

 

 

$icon: sprite-map("icon/*.png", $layout: diagonal); 

 

 

$icon: sprite-map("icon/*.png", $layout: smart); 

 

※わかりやすいように、丸アイコンを二つ足しました！

こんな風になります！

 

作ったスプライトを読み込ませる時は、このように書きます。

.boxの背景にスプライト内のred.pngをひく場合

.box{
  background:sprite($icon, red);
  @include sprite-dimensions($icon, red);
}

↓コンパイル結果

.box {
  background: url('../img/icon-s04f4d80b84.png') 0 -100px no-repeat;
  height: 50px;
  width: 70px;
}

 

sprite()の引数に、sprite-mapの変数名, 使用したいファイル名を書くと、
該当のスプライトの中から使用したいファイルの位置まで書き出してくれます。

同様に@include sprite-dimensions()にも指定すると、
該当のファイルのwidth, heightを書き出してくれます。

 

まとめて書くとこうですね。

（20pxずつ余白をあけた縦型スプライトを作成 ＋ .boxの背景にblue.pngをひく）

$icon: sprite-map("icon/*.png", $spacing: 20px, $layout: vertical); 

.box{
  background:sprite($icon, blue);
  @include sprite-dimensions($icon, blue);
}

たったこれだけ！

本当に思うけど
Compassってすごいいいいいい！！！！