CompassでCSS Spriteする際にスプライト画像間のマージンを取る方法

CompassでCSSスプライトを作成する際に画像間に余白を取らないとRetina対応した際に奇数のサイズの画像などがあると表示が少しおかしくなります。

all-<map>-sprites(true);の場合は$<map>-spacing:10px;などのconfigで設定できるのですが、sprite-map()などでは余白が確保されません。

sprite-map()では以下のようにすると余白を取ることができます。

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

参考:Individual sprite spacing in the sprite-map function doesn't work · Issue #934 · chriseppstein/compass

関連エントリー

MacのCodeKitでCompassを使う
CompassでデータURI スキーム

スポンサードリンク

«jQuery1.8系のanimate()で一部のAndroid端末が落ちる件 | メイン | 今週末(11月23日［金/祝］)にスマートフォンサイト制作実践講座を行ないます。»