[Sass] Retina対応のスプライトシート用 sass mixin

2013/07/6

こんにちは。きんくまです。

Retina対応を調べてました。
わかりやすくまとめられてました。

>> Webサイト＆WebアプリのRetina対応方法まとめ | KRAY Inc

で、sassでmixinとかあるんじゃないかなと思ったら公開されてました。

>> FREE! Sass (SCSS) mixin for including retina images (useful when developing for iOS).

どちらも貴重な情報ありがとうございます！

んで、これを組み合わせて、スプライトシート版にしたいなーと思って、ちょっとだけ加えたのがこれです。名前が長いんで、適当に短くするとよいかも。

@mixin background-image-retina-with-spritesheet($file, $type, $width, $height, $posX, $posY) {
	background-image: url($file + '.' + $type);
	background-repeat:no-repeat;
	background-position:$posX/2 $posY/2;

	@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
		& {
			background-image: url($file + '@2x.' + $type);
			-webkit-background-size: $width/2 $height/2;
		}
	}
}

引数の説明
幅や高さ、位置は、Retina画像用のものを利用します。

$file: 拡張子のぞいた画像パス（../path/to/image）
$type: 画像の拡張子（’png’）
$width: 画像の実際の幅
$height: 画像の実際の高さ
$posX: スプライトシート上の位置X
$posY: スプライトシート上の位置Y

で、Retina版のmyfile@2x.pngと通常版のmyfile.pngを用意します。
画像のリサイズはいろいろとツールがあると思いますが、自分はfladdictさんのブログ（かTwitter）に書いてあったResizerを使ってます。
iOSネイティブアプリ開発のお供になってます。

>> Resizer

サンプル scss

#foo{
    @include background-image-retina-with-spritesheet('../images/myfile', 'png', 400px, 200px, -100px, -50px);
}

出力 css

    #foo {
      background-image: url("../images/myfile.png");
      background-repeat: no-repeat;
      background-position: -50px -25px; }
      @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
        #foo {
          background-image: url("../images/myfile@2x.png");
          -webkit-background-size: 200px 100px; } }