CompassでCSSスプライト

Sassの拡張機能であるCompassを利用するとCSS Spriteが簡単に利用できるのでやり方をメモ書きレベルで書いておきます(SassもCompassも詳しくないのでおかしいところはツッコミを入れてください)。

ディレクトリ構成

まずはCompassで監視している画象ディレクトリ内(config.rbのimages_dirで設定しているディレクトリ)に任意のディレクトリを作成して、 CSSスプライトで利用する元画像を入れておきます。

今回は画象ディレクトリは「img」CSSスプライト用のディレクトリは「sprite」とし、元画像は以下の画象です。

a.png

b.png

c.png

次にscss内で@importでCSSスプライト用のディレクトリとファイルを指定します。

@import "sprite/*.png";

これをコンパイルするとimgディレクトリに「sprite-sb8d1dfbf8c.png」というCSSスプライト用の画象を結合したファイルが生成されます。

sprite-sb8d1dfbf8c.png

また、cssファイルには以下の内容が出力されます。

.sprite-sprite {
  background: url('/img/sprite-sb8d1dfbf8c.png') no-repeat; }

scss内に以下の内容を記述すると画象用のclassが出力されます。

@include all-sprite-sprites(d);

括弧の中の文字列は何でも良い(?)です。(太字はCSSスプライト用ディレクトリ名)

.sprite-a {
  background-position: 0 0;
  height: 50px;
  width: 50px; }
 
 .sprite-b {
  background-position: 0 -100px;
  height: 50px;
  width: 50px; }
  
.sprite-c {
  background-position: 0 -50px;
  height: 50px;
  width: 50px; }

後はHTML内でスプライト用のclassを設定しておけばCSS Spriteが簡単に利用できます。

<div class="splite-a"></div>

この方法は簡単なんですがオフィシャルのドキュメントに乗ってないので少し邪道なのかも。王道な方法だと次のようにスプライト毎に画象の高さと幅を指定していきます。

@import "sprite/*.png";
 
@include all-sprite-sprites();
 
.sprite-a {
  height:sprite-sprite-height(a);
  width:sprite-sprite-width(a);
}
.sprite-b {
  height:sprite-sprite-height(b);
  width:sprite-sprite-width(b);
}
.sprite-c {
  height:sprite-sprite-height(c);
  width:sprite-sprite-width(c);
}

まだ、理解途中なのでもう少し詳しくなったら清書します(ちょっとづつ追記しています)。

参考:Compass Sprites

スポンサードリンク

«Amazonの2012年 上半期Booksランキング(コンピュータ書籍)で14位になりました。 | メイン | CompassでデータURI スキーム»