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

CompassのSprite自動生成は便利だがRetina対応はmixinを自作する必要がある。
ググるとRetina対応の記事が複数でてくるのだけど、background-sizeが決め打ちの記事ばかり。
spriteフォルダ内の個別画像によって生成されるSprite画像のサイズが変わるのだから、background-sizeも動的に設定したい。

ということで、
動的にbackground-sizeに対応＋ちょっとしたパターン分けをいれたmixinを作った。

コード

scss

$sprite: sprite-map("sprite/*.png");
%base-sprite {
    background: sprite-url($sprite);
    @include background-size(ceil(image-width(sprite-path($sprite)) / 2), auto);
    background-repeat: no-repeat;
    overflow: hidden;
}
@mixin sprite-background($name, $width: "false", $height: "false", $size: "true") {
    @extend %base-sprite;

    @if $size == "true" {
        @if $width == "false" {
            width: image-width(sprite-file($sprite, $name)) / 2;
        } @else {
            width: $width;
        }

        @if $height == "false" {
            height: image-height(sprite-file($sprite, $name)) / 2;
        } @else {
            height: $height;
        }
    }

    $ypos: round(nth(sprite-position($sprite, $name), 2) / 2);
    background-position: 0 $ypos;
}

使用例

//▼SCSS

//1.画像サイズを出力する
. hoge {
    @include sprite-background("hoge");
}

//2.画像サイズを指定する
. fuga {
    @include sprite-background("fuga", 60px, 30px);
}

//3.画像サイズを省略する
. piyo {
    @include sprite-background("piyo", $size: "false");
}


//▼CSS
.hoge,.fuga, piyo {
  background: url('sprite-s7c7fcd639e.png');
  -webkit-background-size: 130px, auto;
  background-size: 130px, auto;
  background-repeat: no-repeat;
  overflow: hidden;
}

//1.画像サイズを出力する
.hoge {
  width: 29px;
  height: 17px;
  background-position: 0 -10px;
}

//2.画像サイズを指定する
.fuga{
  width: 60px;
  height: 30px;
  background-position: 0 -50px;
}

//3.画像サイズを省略する
. piyo {
  background-position: 0 -100px;
}