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

grunt-spritesmithはCSSスプライトを生成する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

スポンサードリンク

2014年4月 6日 19:00
カテゴリー CSS

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

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

CSSファイルの利用方法

Retina対応

関連エントリー

スポンサードリンク