SASS(SCSS)自分用スプライトスニペット

  • SPRITE_DIRは任意のディレクトリ名
  • 下記の.spriteクラスを一緒にあてる

    HTML上ではこんな感じ

    Retina(2x)対応版はこちら

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

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

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

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

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

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

npmもアップデート

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