Sprite について（dimention編）

gistfile1.md

続・Sprite について

一つ前の Gist でSprite について触れたが、あれだけだと単に画像をひとまとめにして、それぞれのセレクタを作ってくれるだけ。

width や height の値も入るようにしよう。

@import "my-icons/*.png";
@include all-my-icons-sprites($dimensions:true);

上記のように ($dimentions:true) と付け足すだけで

.my-icons-sprite,
.my-icons-tongue, 
.my-icons-wink {
  background: url('/images/my-icons-saa905fd6f5.png') no-repeat;
}

.my-icons-tongue {
  background-position: 0 -64px;
  height: 64px;
  width: 64px;
}

.my-icons-wink {
  background-position: 0 0;
  height: 64px;
  width: 64px;
}

のように height と width の値も自動的に入力してくれる。
あとは html 側で

<div class="my-icons-tongue"></div>
<div class="my-icons-wink"></div>

と記述するだけで画像が表示されるようになる。
でも、ほかにもやり方あるみたいなので他の方法も探る。