Compassの便利なsplite自動生成

まず、Spliteというのを初めて知りました。

WEBではよくある、ボタンの上にマウスを乗っけたら色が変わるってやつ。

あれって実装方法はいろいろあって、例えばjQueryのマウスオーバーイベントだったり、cssのhoverでbackground-imageを変えたりとか。

 

でもいずれにしても問題なのが、画像を複数読み込まなければならず、多くの場合はホバーイベントが発生したときに初めて画像の読み込みを開始するというところ。

これでは表示速度の低下につながってしまう。

 

そこで解決策として用いられるのがこのsplite。

原理としては複数のボタンをくっつけた1枚の画像を用意しておいて、positionをずらすことであたかも画像自体が入れ替わっているように見せる演出。

 

そしてcssの拡張言語、compassではこのspliteを自動的に生成してくれるという超便利な機能を提供してくれている。

 

【参考資料】

http://liginc.co.jp/web/html-css/other-html-css/35502

http://toybox-design.net/?p=622

 

http://kanapple.net/study/archives/54

 

概要としては、splite画像にしたい画像たちをひとつのフォルダにまとめておき、

例えば、

$sprites: sprite-map("sprites/*.png");

で画像を自動的につなげてくれる。

あとは各種positionを計算してくれる関数だったりwidthやheightを出してくれる関数も用意されているので面倒な作業をよしなにやってくれる。