hijiriworld Web

[2014/06/27 更新]

※ SassとCompassが使えることが前提

CompassでCSSスプライトしてRetina対応してデータURLスキームも行うミックスインを作ったので、そのメモ。

準備

ディレクトリ構成は以下の通り（Compass標準）
images/spritesディレクトリに必要な画像を格納しておく。

コンフィグファイルの編集

relative_assetsは、ヘルパー関数で生成するURLを相対パスか、それとも絶対パスで表現するかの設定。
これをtrueにすることで、スプライトを生成した時に相対パスになるので設定しておくこと。

> config.rb

css_dir = "css"
sass_dir = "sass"
images_dir = "images"
relative_assets = true

Mixin

本題のMixinは以下

> style.scss

@import "compass";

$map: sprite-map( "sprites/*.png", $spacing: 10px, $layout: vertical );
$map-width: image-width( sprite-path( $map ) );

@mixin sprite-background( $dpx ) {
	background-image: inline-sprite( $map );
	background-repeat: no-repeat;
	@include background-size( $map-width/$dpx auto );
	display: inline-block;
	text-indent: -9999px;
	vertical-align: middle;
}
@mixin sprite-background-name( $name, $dpx ) {
	height: image-height( sprite-file( $map, $name ) ) / $dpx;
	width: image-width( sprite-file( $map, $name ) ) / $dpx;
	$ypos: round( nth( sprite-position( $map, $name ), 2 ) / $dpx );
	background-position: 0 $ypos;
}

.sprite { @include sprite-background( 1 ); }
.sprite-2x { @include sprite-background( 2 ); }

@each $name in sprite-names( $map ) {
	.#{$name} {
		@include sprite-background-name( $name, 1 );
	}
	.#{$name}-2x {
		@include sprite-background-name( $name, 2 );
	}
}

line3: スプライト画像を生成
line4: スプライト画像の幅を取得

$dpx が dpx の値となるので、通常は1、Retinaの場合は2となる。

これでcompass watchすれば以下のようにジェネレートされる。

.sprite {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA(省略)');
  background-repeat: no-repeat;
  -webkit-background-size: 64px auto;
  -moz-background-size: 64px auto;
  -o-background-size: 64px auto;
  background-size: 64px auto;
  display: inline-block;
  text-indent: -9999px;
  vertical-align: middle;
}
.sprite-2x {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA(省略)');
  background-repeat: no-repeat;
  -webkit-background-size: 32px auto;
  -moz-background-size: 32px auto;
  -o-background-size: 32px auto;
  background-size: 32px auto;
  display: inline-block;
  text-indent: -9999px;
  vertical-align: middle;
}
.blogger {
  height: 64px;
  width: 64px;
  background-position: 0 -148px;
}
.blogger-2x {
  height: 32px;
  width: 32px;
  background-position: 0 -74px;
}
.evernote {
  height: 64px;
  width: 64px;
  background-position: 0 -74px;
}
.evernote-2x {
  height: 32px;
  width: 32px;
  background-position: 0 -37px;
}

/* 省略 */

※ imagesディレクトリ直下にスプライト画像が生成されるが、データURIスキームされているのでこれをサーバにアップする必要はない。

ジェネレートされたstyle.cssを読み込んで、以下のようにコーディングすれば良い。

> dpiが1の場合

<span class="sprite facebook">facebook</span>

> dpiが2の場合

<span class="sprite-2x facebook-2x">facebook</span>

そして最大のメリットはメンテナンス性の高さにある。つまり、

サンプル一式をGithubにもあげときました。