CSSスプライトを生成する「grunt-spritesmith」

このエントリーをはてなブックマークに追加

grunt-spritesmithCSSスプライトを生成するGruntモジュールです。

Gruntの基本的な使い方は「Gruntで始めるWeb制作の自動化 - to-R」を参照に。

grunt-spritesmithのインストールは以下のコマンドです。

npm install grunt-spritesmith --save-dev
Gruntfile.jsの内容は以下のようにします。srcで個別の画像を置くディレクトリを、destCSSで関連するCSSを書き出すファイル名(SassやLess、StylusでもOK)を、destImgで結合したスプライト画像のファイル名を指定します。
module.exports = function(grunt) {
  //グラントタスクの設定
  grunt.initConfig({
    sprite: {
      all:{
        src: '_sprite/*.png',
        destCSS: '_sass/_sprite.scss',
        destImg: 'images/sprite.png'
      }
    }
  });
  //プラグインの読み込み
  grunt.loadNpmTasks('grunt-spritesmith');
};

上記のように指定しておけば以下のコマンドでgrunt-spritesmithを実行し、スプライト画像とCSSファイルが書き出されます。

grunt sprite

CSSファイルの利用方法

書きだされたSCSSファイルを元にCSSファイルの利用方法を解説します。上記のサンプルでは以下の様な_sprite.scssファイルが書き出されます。

  $a-x: 0px;
  $a-y: 0px;
  $a-offset-x: 0px;
  $a-offset-y: 0px;
  $a-width: 50px;
  $a-height: 50px;
  $a-total-width: 50px;
  $a-total-height: 150px;
  $a-image: 'images/sprite.png';
  $a: 0px 0px 0px 0px 50px 50px 50px 150px 'images/sprite.png';
  $b-x: 0px;
  $b-y: 50px;
  $b-offset-x: 0px;
  $b-offset-y: -50px;
  $b-width: 50px;
  $b-height: 50px;
  $b-total-width: 50px;
  $b-total-height: 150px;
  $b-image: 'images/sprite.png';
  $b: 0px 50px 0px -50px 50px 50px 50px 150px 'images/sprite.png';
  $c-x: 0px;
  $c-y: 100px;
  $c-offset-x: 0px;
  $c-offset-y: -100px;
  $c-width: 50px;
  $c-height: 50px;
  $c-total-width: 50px;
  $c-total-height: 150px;
  $c-image: 'images/sprite.png';
  $c: 0px 100px 0px -100px 50px 50px 50px 150px 'images/sprite.png';
 
  @mixin sprite-width($sprite) {
    width: nth($sprite, 5);
  }
 
  @mixin sprite-height($sprite) {
    height: nth($sprite, 6);
  }
 
  @mixin sprite-position($sprite) {
    $sprite-offset-x: nth($sprite, 3);
    $sprite-offset-y: nth($sprite, 4);
    background-position: $sprite-offset-x  $sprite-offset-y;
  }
 
  @mixin sprite-image($sprite) {
    $sprite-image: nth($sprite, 9);
    background-image: url(#{$sprite-image});
  }
 
  @mixin sprite($sprite) {
    @include sprite-image($sprite);
    @include sprite-position($sprite);
    @include sprite-width($sprite);
    @include sprite-height($sprite);
  }

まず、メインのSassファイル内で上記のファイルを読み込みます。

@import "sprite";

すでにMixinで書き出されていますのでa.pngを表示したい場合は以下のようにするだけで表示されます。

div{
	@include sprite($a);
}

Retina対応

各画像の値が定義されているのでRetina対応もRetina用のMixinを新たに作ってあげるだけで簡単にできます。(ただし、上記の_sprite.scssに追記してしまうと毎回上書かれてしまうので別ファイルで定義しましょう)

@mixin r-sprite-width($sprite) {
  width: nth($sprite, 5)/2;
}
 
@mixin r-sprite-height($sprite) {
  height: nth($sprite, 6)/2;
}
  
@mixin r-sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3)/2;
  $sprite-offset-y: nth($sprite, 4)/2;
  background-position: $sprite-offset-x  $sprite-offset-y;
}
 
@mixin r-sprite-size($sprite) {
  background-size: nth($sprite, 7)/2 nth($sprite, 8)/2;
}
 
@mixin r-sprite($sprite) {
  @include sprite-image($sprite);
  @include r-sprite-position($sprite);
  @include r-sprite-width($sprite);
  @include r-sprite-height($sprite);
  @include r-sprite-size($sprite); 
}

こうすることで以下のように呼び出しRetina対応が可能になります。

div{
	@include r-sprite($a);
}

CompassでCSSスプライトが重い!という場合などはぜひ試してみてください。

参考:gulp.spritesmithでCSS spriteをやってみた。【gulp】 - E-riverstyle Vanguard

関連エントリー

CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」
grunt-webfontで書き出されるwebフォントの文字列を変更
メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」
Compassでスプライト画象を高速に書き出す方法
CompassでCSSスプライト

スポンサードリンク

«CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」 | メイン | [書評] 開発効率をUPする Git逆引き入門»

このエントリーのトラックバックURL
コメント

現行のバージョンではdestCSSではなくdistCssになったようです。
https://github.com/hudochenkov/grunt-spritesmith-retina-mixins/commit/97cff8152356bae9f9b30cb91a80b235294a494b
(本家見ないで、エラーに格闘してしまいました。)
できましたら書き換えか、本家のドキュメントのリンクをお願いします。


投稿者:高見 典彦 | 2016年5月 6日 23:15
コメントを投稿