各画像を間隔をつけてCSSスプライト用の画像を出力するときのメモ【Sass】【Compass】

  • 投稿日:
  • by
  • カテゴリ:

CompassのCSSスプライト用の画像ですが、何もしなければびっしりと縦に詰まった状態で出力されます。 それが嫌なので各画像を間隔をつけて出力するときのメモです。

まずはお約束

@import "compass";

スプライト用の各画像がspriteというディレクトリにあることを前提として、各画像の間隔を100pxとすると以下のように書きます。$mapという変数に格納します。

$map: sprite-map("sprite/*.png", $spacing: 100px);

適当にMixinを作成します。

@mixin sprites($v: 0, $h:0){
	background-image: sprite-url($map);
	background-repeat: no-repeat;
	background-position: $v $h;
}

セレクターに、上記のMixinを指定すると、100pxの間隔が空いたCSSスプライト用の画像が作成されます。

.className {
	@include sprites(0, 50%);
}

上記の全コード

@import "compass";

$map: sprite-map("sprite/*.png", $spacing: 100px);

@mixin sprites($v: 0, $h:0){
	background-image: sprite-url($map);
	background-repeat: no-repeat;
	background-position: $v $h;
}


.className {
	@include sprites(0, 50%);
}

※:本エントリーは、メモ用なのでMixinは参考にならない可能性のほうが高いです。