Compassでスプライト画象を高速に書き出す方法

CompassでRetina対応をするとコンパイルにやたらと時間がかかってしまいます。

以下のままですとすごく時間がかかるのですが、

$sprites: sprite-map("sprites/*.png");
@mixin sprite-background($name) {
 	background-image: sprite-url($sprites);
 	background-repeat: no-repeat;
 	display: block;
 	height: image-height(sprite-file($sprites, $name)) / 2;
 	width: image-width(sprite-file($sprites, $name)) / 2;
 	$ypos: round(nth(sprite-position($sprites, $name), 2) / 2);
 	background-position: 0 $ypos;
 	@include background-size(50px auto);
}

これを次のように変更するとコンパイルの時間が凄く短くなります。

$sprites: sprite-map("sprites/*.png");
$sprites-img:sprite-url($sprites);
@mixin sprite-background($name) {
 	background-image: $sprites-img;
 	background-repeat: no-repeat;
 	display: block;
 	height: image-height(sprite-file($sprites, $name)) / 2;
 	width: image-width(sprite-file($sprites, $name)) / 2;
 	$ypos: round(nth(sprite-position($sprites, $name), 2) / 2);
 	background-position: 0 $ypos;
 	@include background-size(50px auto);
}

どうもsprite-url()を通すたびにスプライト画象生成が行なわれ、それでコンパイルが遅くなってるようです。お困りの方はお試しあれ。

--

ついでに宣伝ですが@t32kによるSass/Compassのお話が聞けるCSS Nite LP, Disk 26「CSS Preprocessor Shootout」の残席があとわずかなので、興味がある方は早めにご検討ください。

関連エントリー

CompassでCSS Spriteする際にスプライト画像間のマージンを取る方法
MacのCodeKitでCompassを使う
CompassでデータURI スキーム
CompassでCSSスプライト
Stylus入門

スポンサードリンク

«CSS Nite 26「CSS Preprocessor Shootout」に登壇します。 | メイン | スマホサイトでtd/th要素へのposition:relativeはダメ！»