Compass+GruntでCSSスプライトを使う


パフォーマンス改善の為にCSSスプライトを導入するのは、もはやスタンダードになっていますが、用意するのは結構面倒ですよね。

画像を追加したり、変更がある度にスプライトシートを変更し、座標をアップデートするのは非常に面倒です。

ところがCompassを使えば、それらをすべて自動でやってくれます。

Compassを使ってCSSスプライトを作る方法についてはすでに色々な記事がありますので、今回はさらにそれをGruntのタスクに組み込むところまでを解説したいと思います。

 CompassをGruntタスクに組み込む

まずgrunt-contrib-compassをインストールします。

Gruntfile.jsは以下の様になります。

 

optionsの値について

compassプラグインのoptionsについて説明していきましょう。

  • specify – コンパイルしたいファイルを指定したい場合は、このオプションでファイルのパスを指定します。
  • sassDir – sassファイルが置かれているディレクトリです。
  • css – コンパイルされたcssファイルが置かれるディレクトリです。
  • imageDir - スプライトシートの元になる画像が置かれるフォルダです。
  • generatedImagesDir – 書き出されたスプライトシートが置かれるディレクトリです。
  • httpGeneratedImagesPath – ブラウザで見た時にスプライトシートが置かれているディレクトリへのパスです。

画像系のオプションがややこしいので解説を付け加えます。

プロジェクトのルートからの画像パスと、ブラウザからのパスが違うことは多々ある思います。

例えばRailsだったらapp/assets/imagesに画像が格納されていますが、ブラウザから画像にアクセスするときは、/assetsですよね。

こういうときimageDirはapp/assets/images、httpGeneratedImagesPathは/assetsになります。

また、スプライトのオリジナル画像と書き出されるスプライトシートのディレクトリを分けたい場合は、generatedImagesDirにimageDirとは別のディレクトリパスを指定します。

 

 CSSスプライトを使ってみる

それでは準備が整ったので実際にCSSスプライトを使ってみましょう。

ファイルの配置はこのような形にします。

imageDirの中にディレクトリを作成し、その中にスプライトシートにしたい画像を詰め込みます。

これらをスプライトシートにするには以下の記述をscssファイルに加えます。

またスプライトシートの画像を使うには、以下の様にします。

gruntタスクを実行するとコンパイルとスプライトシートの生成が行われます。

 

うまくできたでしょうか?

compassにはまだまだスプライトシート関連の機能があるので、使いこなすと色々と便利だと思います。