Compassでお手軽cssスプライト生成!STACKSTOCK日々の出来事や感じた事、学んだ事を蓄積(STOCK)して積み上げ(STACK)てますCompassでお手軽cssスプライト生成!2013年02月05日みなさんCSSスプライトは使ってますか?CSSスプライトを効果的に使えばhttpリクエスト数を減らすことができるからステキだなぁと思うんですが、手作業で作るのは手間がかかりますよね。僕はCSSスプライトジェネレータ的な物を使いたい派なんですが、中々決定打がなく、目下CSSスプライト難民です。そんな中、今対応中の案件で試しにCompassに搭載されているCSSスプライト生成機能を使ってみました。お高いCodeKitを買ったんだし、少なくとも試してはみたいですもんね。CSSスプライトの作り方まず、スプライトにしたい画像をひとまとめにします。└こんな感じで画像を入れます次に、scss内でスプライト用のディレクトリとファイルを指定します。内にスプライト画像が生成されます。cssにも画像の読みこみが記述されます。all-icon-sprites(i);太字は画像のフォルダ名です。カッコの中の文字は何でも良いみたいですよ。これで各画像用のcssが追加されます。50px;}簡単ですね−。おもったこと手軽スプライトに画像が追加されてもほぼ0コストで対応可能scssを保存する度に書き出すの煩わしい書き出すcssの指定はできないの?まず、Mac+CodeKitの方はそれだけで環境が整ってる訳で、お手軽です。人によってはこれがあるからCodeKitを買う、って場合もあるかもね、ってくらい。CompassでCSSスプライトを作る場合、SCSSファイルを保存する度に画像を生成するはずなので、コンパイルが遅くなると言う欠点があります。体感だと「めっちゃおそい」って感じです。3秒くらい待つかなぁ。CompassでのCSSスプライト生成の利点は、さっき挙げたお手軽な点と、一般的なジェネレータサービスだと、CSSスプライトに使う画像が1点増えたら再度CSSを書き直す手間が増えるんじゃないかと思うんですが、コンパイル時に生成するのでそんな手間はありません。あと、僕は画像置換的に使いたいなぁとおもってるので、以下のようなコードにしたいんですけど出来ないんですかね、よく分かんない。はみ出した部分は非表示にする}これが出来れば良いのになぁと思うんですが、もしかしてこの書き方はスタンダードじゃないの?そんな感じですが、結構便利かと思います。09:16そうだよね、せっかく買ったんだもんね。http://t.co/t7BSercHReplyトラックバック/ピンバックはありません。音楽系copyright@STACKSTOCK。