design makes life richly.

Published: 5年 ago

Compassで簡単CSSスプライト


 
 
ページスピード改善の為にCSS Spriteを利用するってことはよくあると思います。
ただ、画像に変更が合った場合等に、座標の変更が大変面倒です。そこでそれを解消してくれるのがCompass。
なんとCSS Sprite用に作った画像を合成して、一つの画像にしてくれるんです!
また変数を利用すれば、画像変更の際の座標の問題にも対応出来るので、非常に便利です。
CompassすごいよCompass! 
 
 

CSSスプライトに使用する画像の結合

 
まずCSSに使用する画像をフォルダにまとめます。下記のような感じですね。 
folder 
 
次にCompassでの画像の結合。
これはもの凄く簡単!

@import "icons/*.png";

たったこれだけ。見事に結合されとりますね☟ 
icons 
CSSスプライトに使う画像をフォルダごとに管理出来るってのも素敵ですよね。使わない画像出てきたら、削除するだけで良いですし。
 
 

変数を利用した座標指定

 
CSSスプライトで最も面倒なのがこの部分でしょう。
Compassでは変数を利用する事によって、自動的に座標を書き出してくれます。
CSSスプライトに使用する画像を更新した時などは、座標を指定し直す必要があるので、これを利用するとたいへん便利です。
指定の仕方はコチラ☟

$sprites: sprite-map("icons/*.png");
.btn {
  background: url('../img/icons.png') no-repeat;
  background-position: sprite-position( $sprites, facebook );
}

// 出力後のCSS
.btn {
  background: url("../img/icons.png") no-repeat;
  background-position: 0 -64px;
}

はじめに、$Spriteの部分で座標指定する画像を指定しています。
そしてsprite-position( $sprites, facebook );の部分で、CSSスプライト用のフォルダの中の画像がどの座標に値するかを出力しています。
他にも、画像サイズ等もパスを指定すれば算出してくれるので便利です☟

$sprites: sprite-map("icons/*.png");
.btn {
  background: url('../img/icons.png') no-repeat;
  background-position: sprite-position( $sprites, facebook );
  height: image-height("icons/facebook.png");
  width: image-width("icons/facebook.png");
}

// 出力後のCSS
.btn {
  background: url("../img/icons.png") no-repeat;
  background-position: 0 -64px;
  height: 32px;
  width: 32px;
}

 
 
 

CSS Spriteのテンプレート

 
というわけで、以上のことを踏まえテンプレート化してみました。
こんな感じの書き方がコード見やすく綺麗な印象。

@import "icons/*.png";
$sprites: sprite-map("icons/*.png");
@mixin hideout_text {
  display: block;
  text-indent: -9999px;
}
.icons-sprite {
  @include hideout_text;
  width: 32px;
  height: 32px;
}
.facebook {
  background-position: sprite-position( $sprites, facebook );
}
.rss {
  background-position: sprite-position( $sprites, rss );
}
.twitter {
  background-position: sprite-position( $sprites, twitter );
}

// 出力後のCSS
.icons-sprite {
  background: url('/img/icons.png') no-repeat;
}
.icons-sprite {
  display: block;
  text-indent: -9999px;
  width: 32px;
  height: 32px;
}
.facebook {
  background-position: 0 -64px;
}
.rss {
  background-position: 0 -32px;
}
.twitter {
  background-position: 0 0;
}

画像の大きさが同じ場合はこんな感じで、記述する。
個別に画像の大きさを指定する場合は、パス指定して大きさを算出して行けば良いのかなという感じです。
もっとここら辺は、もっと効率の良い書き方ありそうなので、色々試してみたいなー! 
 
 
※追記
Compassで吐き出した画像についている、よくわかんない数字の文字列を、消して出力する方法はこちら 
http://stackoverflow.com/questions/9183133/how-to-turn-off-compass-sass-cache-busting/9332472
同じ画像を複製して、文字列を消してくれるようになってるみたいです。 
 
 

Have a Comment?

WP-SpamFree by Pole Position Marketing

Some HTML is OK