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
コメントを残す
TrackBack URL :
ピンバック: Sass、Compass な僕の Dreamweaver スニペット | clear sky source
ピンバック: 2012年のアクセスランキング | clear sky source
ピンバック: compassのcssスプライトでUndefined mixin 'background-size'.となる時の対処法