SASS、Compassを使って簡単!アイコン実装方法

お久しぶりです。
先月のcssniteでCSSスプライトの作成方法が紹介せれていたので復習の為にも作成方法をまとめておきたいと思います。

目次

• -そもそもCSSスプライトとは、どのように便利なのか
• -SASS、Compassを使ってアイコンをspriteで作ってみる
• -classを追加するだけで簡単アイコン実装

そもそもCSSスプライトとは、どのように便利なのか

CSSスプライトとはサイト内で使用するアイコンなどの画像を一枚の画像として書き出してCSSのbackgrund-positionで表示画像を切り替える手法です。
メリットとしてはhttpリクエストを減らす事ができ、サイトの表示速度を高速化する事ができます。
しかしCSSスプライトをCSSのみで実装しようとすると画像を一箇所にまとめてスライスする必要があったり、background-positionの値を個々に指定したりと、実装に時間がかかってしまいます。
そこで、SASS、Compassの出番です。SASS、Compassを使うとスプライト化したい画像を指定のフォルダに入れ、コンパイルするだけでスプライト画像として書き出し、backgruondの指定や、幅指定も自動でしてくれます。便利。

SASS、Compassを使ってアイコンをspriteで作ってみる

実際の設定方法はこちら。なおsass、compassの導入方法は今回は割愛しますので知りたい方はこちらをご覧になるとよろしいかと。

スプライト用のSCSSファイルへの記述

@charset “utf-8”;

//iconフォルダ内のpng画像を一枚のスプライト画像にまとめる
@import “icon/*.png”;
//iconの幅と高さを自動で出してくれる
$icon-sprite-dimensions:true;
//アイコン名でclassを作ってbackground-positionを指定
@include all-icon-sprites;
//アイコン実装用のcss
.icon{
	display:inline-block;
	*display: inline;
	*zoom: 1;
	padding-right: 5px;
}

実際のSCSSファイルの記述は上記の通りです。iconと記載されている箇所は任意です。たとえばarrowsという名前にしたい場合は$arrows-sprite-dimensions:true; @include all-arrows-sprites;と記述し、フォルダ名をarrowsにすればOKです。

icon画像をスプライト用のフォルダに格納。

スプライト化したい画像をiconフォルダに格納。拡張子はpngです。この時設定したアイコン名がコンパイルした際のCSSのclass名になります。

Compass でコンパイルする。

コンパイルするとiconフォルダに格納したアイコン画像が一枚のpng画像になって出力されます。

.icon-sprite, .icon-home, .icon-mail, .icon-shopping {
  background: url(’../img/icon-s05c70b92ff.png’) no-repeat;
}

.icon-home {
  background-position: 0 0;
  height: 44px;
  width: 50px;
}

.icon-mail {
  background-position: 0 -81px;
  height: 33px;
  width: 50px;
}

.icon-shopping {
  background-position: 0 -44px;
  height: 37px;
  width: 40px;
}

.icon {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

コンパイル後のCSSファイルは上記の通り。各アイコンごとに .[フォルダ名]-[画像名]でclassが割り当てられます。さらにbackgroundの指定、幅と高さの指定も出力されているのがわかるかと思います。

classを追加するだけで簡単アイコン実装

実際にコンパイルされたclassを使ってアイコンを実装してみます。

<ul id="gNav">
<li><i class="icon icon-home"></i><a href="/">ホーム</a></li>
<li><i class="icon icon-cart"></i><a href="/">ショッピング</a></li>
<li><i class="icon icon-mail"></i><a href="/">お問い合わせ</a></li>
</ul>

今回はあらかじめ指定しておいたアイコン用のclass（.icon）にコンパイル後に生成された各アイコンのclassを追加する方法で実装してみました。

上記のように実装することができます。簡単。
ディレクトリ構成やconfig.rbの設定など下記にダウンロードリンクを張ってありますので参考までに。

まとめ

今更な感じはありますが、CSSスプライトの実装方法について書いてみました。
SASSやCompassには他にもネストやmixinなど便利な機能が豊富に用意されています。
どれも便利なのでついつい多用してしまいがちですが、反面、あまり理解せずに使ってしまうとCSSの容量が多くなってしまう場合があります（mixinの多用など)のであくまでご利用は計画的に。

今回使ったアイコンは下記のサイトから無料でダウンロードできます。
http://www.flaticon.com/