CompassでCSSスプライト(Retina対応)

今はコレです。

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

usage

  • 画像は「compassのimages_dir/sprites2x」フォルダ内に入っている想定
  • hoge.png」を表示したいのであれば「@include sprite-background2x(hoge);」のように指定
  • 「@include background-size(50px auto);」の箇所の50pxは、一番横幅の大きい画像の半分のサイズを指定

頑張れば@include background-size(50px auto);の50pxも自動化できるはずです。Let’s try!

comment

  1. ピンバック: Sass、Compass な僕の Dreamweaver スニペット |  clear sky source

  2. ピンバック: 2012年のアクセスランキング |  clear sky source

  3. ピンバック: compassのcssスプライトでUndefined mixin 'background-size'.となる時の対処法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

TrackBack URL :