Compassでお手軽cssスプライト生成!

2013年02月05日

みなさんCSSスプライトは使ってますか?CSSスプライトを効果的に使えばhttpリクエスト数を減らすことができるからステキだなぁと思うんですが、手作業で作るのは手間がかかりますよね。

だから僕はCSSスプライトジェネレータ的な物を使いたい派なんですが、中々決定打がなく、目下CSSスプライト難民です。

そんな中、今対応中の案件で試しにCompassに搭載されているCSSスプライト生成機能を使ってみました。せっかくお高いCodeKitを買ったんだし、少なくとも試してはみたいですもんね。

CSSスプライトの作り方

まず、スプライトにしたい画像をひとまとめにします。

htdocs/
└ img/
 └ icon/
  └01.png
  └02.png
  └03.png
  └こんな感じで画像を入れます

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

@import "icon/*.png";

これで img/ 内にスプライト画像が生成されます。

また、cssにも画像の読みこみが記述されます。

.icon-sprite {
  background: url('/img/icon-s8e8b8934fb.png');
}

そして、各画像の表示用classを生成します

@include all-icon-sprites(i);

太字は画像のフォルダ名です。カッコの中の文字は何でも良いみたいですよ。

これで各画像用のcssが追加されます。

.icon-sprite, .icon-01, .icon-02, .icon-03 {
  background: url('/img/icon-s8e8b8934fb.png') no-repeat;
}
.icon-01 {
  background-position: 0 0;
  height: 50px;
  width: 50px;
}
.icon-02 {
  background-position: 0 -50px;
  height: 50px;
  width: 50px;
}
.icon-03 {
  background-position: 0 -100px;
  height: 50px;
  width: 50px;
}

簡単ですね−。

おもったこと

  • 手軽
  • スプライトに画像が追加されてもほぼ0コストで対応可能
  • scssを保存する度に書き出すの煩わしい
  • 書き出すcssの指定はできないの?

まず、Mac+CodeKitの方はそれだけで環境が整ってる訳で、お手軽です。人によってはこれがあるからCodeKitを買う、って場合もあるかもね、ってくらい。

CompassでCSSスプライトを作る場合、SCSSファイルを保存する度に画像を生成するはずなので、コンパイルが遅くなると言う欠点があります。体感だと「めっちゃおそい」って感じです。3秒くらい待つかなぁ。

ただ、CompassでのCSSスプライト生成の利点は、さっき挙げたお手軽な点と、一般的なジェネレータサービスだと、CSSスプライトに使う画像が1点増えたら再度CSSを書き直す手間が増えるんじゃないかと思うんですが、コンパイル時に生成するのでそんな手間はありません。

あと、僕は画像置換的に使いたいなぁとおもってるので、以下のようなコードにしたいんですけど出来ないんですかね、よく分かんない。

.icon-01 {
  background-position: 0 -100px;
  width: 50px;
  height: 0;         // 高さは0にして
  padding-top: 50px; // 上余白を高さ分取る
  overflow: hidden;  // はみ出した部分は非表示にする
}

これが出来れば良いのになぁと思うんですが、もしかしてこの書き方はスタンダードじゃないの?

そんな感じですが、結構便利かと思います。CodeKitをお使いの方は試してみては如何です?

他にこんな事も書いてます

FBでコメント

2個のコメント

  1. 書いた− Compassでお手軽cssスプライト生成!:STACKSTOCK http://t.co/DP8rel3T

  2. そうだよね、せっかく買ったんだもんね。試そう:SS | Compassでお手軽cssスプライト生成! http://t.co/t7BSercH

トラックバック/ピンバックはありません。