Compassを使用して、CSS Spriteを自動生成

Compassを使用して、CSS Spriteを自動生成する方法。

CSS Spriteは高速化(HTTPリクエストを減らす)ための方法ですが、手間が掛かるため大変です。

しかし、Compassを使用すると簡単に使用することが出来ます。

mixinで画像サイズを取得

Compassには非常に便利な関数が用意されています。

『image-width』『image-height』は、画像のパスを指定するだけで、画像のサイズを取得できてしまいます。

こちらをよく使用するので、mixinにしてしまいます。

@mixin getImgSize($img, $w:0, $h:0){
  width: image-width($img) - $w;
  height: image-height($img) - $h;
}

第一引数で、パスを渡します。第二でpaddingなどを指定していればpaddingの横幅分渡し、第三引数でも同じくpaddingの高さを渡します。

config.rbの設定

config.rbに画像フォルダのパスを指定します。

#環境に合わせて下さい。
images_dir = "img"

と、画像のパスを指定します。

CSS Spriteを作成する

CSS Spriteを作成するにはCompass の『sprite-map』関数を使用します。

sprite-mapでCSS Spriteを作成し、これを変数に入れ、画像のパス・画像のポジションを取得します。

$sprites: sprite-map("sprite/*.png");
a {
	text-indent: 100%;
	white-space: nowrap;
	display:block;
	overflow: hidden;
	background : url(sprite-path($sprites));
	background-position: sprite-position( $sprites, test );
	@include getImgSize("sprite/test.png");
}
a.test2{
	background-position: sprite-position( $sprites, test2 );
}

とすることで、画像のサイズ、CSS Spriteのパス、画像のポジションを自動で取得出来ます。