SASS(SCSS)Retina対応(2x)CSSスプライトスニペット

標準

SPRITE_DIRは任意のディレクトリ名

$SPRITE_DIR-map: sprite-map("SPRITE_DIR/*.png", $spacing:2px);
$SPRITE_DIR-img: sprite-url($SPRITE_DIR-map);

@mixin SPRITE_DIR($s) {
  background: $SPRITE_DIR-img no-repeat;
  padding-top: (image-height(sprite-file($SPRITE_DIR-map, $s)) / 2);
  width: (image-width(sprite-file($SPRITE_DIR-map, $s)) / 2);
  $ypos: (nth(sprite-position($SPRITE_DIR-map, $s), 2) / 2);
  background-position: 0 $ypos;
  background-size: auto floor(image-height(sprite-path($SPRITE_DIR-map)) / 2);
}

@each $sprite in sprite-names($SPRITE_DIR-map){
  .SPRITE_DIR-#{$sprite} {
    @include SPRITE_DIR($sprite);
  }
}

background-sizeは、スプライト画像の長辺で計算。極端に縦長のスプライト画像に対して、横サイズを基点にbackground-sizeを設定してたら画像が数ピクセルずれたりする。(これに、小一時間ハマったので備忘録)

また、background-sizeだけは、小数点が入っているとMacのChromeで見た時に画像がボケるのでfloor()で小数点を削除。

Retinaじゃない(1x)スプライトスニペットはこちら

HomebrewでNode.jsとNPMをインストール&アップデート

標準
brew uninstall node
brew install node
sudo postinstall node

npmもアップデート

sudo npm update -g npm@latest

npmのアップデートについては、インストールやアップデート時にちゃんとメッセージ出てるとのこと