高解像度(Retina)対応 背景画像 SCSS Mixin

_retina.scss

// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
//画像名とサイズを指定すると、高解像度ようのメディアクエリーを作成、倍の解像度の画像を表示してくれるミックスイン
//retinajs.com で紹介されているが、ratina.jsとは関係ない
@mixin at2x($image_name, $w: auto, $h: auto, $extention: '.png') {
  background-image: image_url($image_name + $extention);
  $x2img : $image_name + '@2x' + $extention;
  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
    background-image: url($x2img);
    background-size: $w $h;
  }  
}

/* 使用サンプル

//SCSS
#logo {
  .at2x('/img/myimg', 200px, 100px, '.png');//引数：画像パス,width,height,拡張子（pngなら不要）
}

//result CSS
-> 通常解像度：/img/myimg.png(200 x 100px)
-> 高解像度　：/img/myimg@2x.png(400 x 200px)

#logo {
  background-image: url('/img/myimg.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/img/myimg@2x.png');
    background-size: 200px 100px;
  }
}
*/