Sass/Compass:Sprite自動生成のRetina対応 - Qiita

CompassのSprite自動生成は便利だがRetina対応はmixinを自作する必要がある。 ググるとRetina対応の記事が複数でてくるのだけど、background-sizeが決め打ちの記事ばかり。 spriteフォルダ内の個別画像によって生成されるSprite画像のサイズが変わるのだから、background-sizeも動的に設定したい。 ということで、 動的にbackground-sizeに対応＋ちょっとしたパターン分けをいれたmixinを作った。 コード $sprite: sprite-map("sprite/*.png"); %base-sprite { background: sprite-url($sprite); @include background-size(ceil(image-width(sprite-path($sprite)) / 2), auto); b

[kool_kreate]

sprite