compassでスマホのスプライトシート作る時、どうも今までしっくりしたやり方出来なくて妥協してたので、考え直してみた。
できたものはこれ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@mixin sp-bg($name) $map: sprite-map("sprites-dir/*.png", $spacing: 2px) $file: sprite-file($map, $name) background-image: sprite-url($map) background-size: sprite-width($map)/2, sprite-height($map)/2 background-repeat: no-repeat width: image-width($file)/2 height: image-height($file)/2 background-position-x: nth(sprite-position($map,$name), 1)/2 background-position-y: nth(sprite-position($map,$name), 2)/2 text-indent: -119988px h1 +sp-bg(hoge) |
これで、h1にsprites-dirディレクトリ内にあるhoge.pngが半分のサイズで表示されるようになる。
なんかもっと良いやり方というか、そういう指定の仕方があるのかもだけど、compass勉強になったしおけ
http://compass-style.org/reference/compass/helpers/sprites/