Retina images with Grunt

Readme.md

This Gist explains how to support very easily retina images using grunt-spritesmith.

Gruntfile.js

//Grunt Spritesmith plugin
sprite: {
  build: {
      src: ['src/img/sprite/*.png'],
      destImg: 'build/img/s-' + timestamp + '.png',
      destCSS: 'src/scss/common/sprite.scss',
      imgPath: '../img/s-' + timestamp + '.png',
      algorithm: 'binary-tree',
      engine: 'gm',
      'engineOpts': {
        'imagemagick': true
      },
      cssFormat: 'scss',
      cssOpts: {
        cssClass: function (item) {
          return '.s-' + item.name;
        }
      },
      padding: 1
  },
  buildretina: {
      src: ['src/img/sprite-retina/*.png'],
      destImg: 'build/img/s-r-' + timestamp + '.png',
      destCSS: 'src/scss/common/sprite-retina.scss',
      imgPath: '../img/s-r-' + timestamp + '.png',
      algorithm: 'binary-tree',
      engine: 'gm',
      'engineOpts': {
        'imagemagick': true
      },
      cssFormat: 'scss',
      cssOpts: {
        cssClass: function (item) {
          return '.s-' + item.name + '-2x';
        }
      },
      padding: 2
  }
}

mixins.scss

@mixin sprite-background-size($sprite) {
  background-size: nth($sprite, 7) nth($sprite, 8);
}

@mixin sprite-retina($sprite, $sprite2x) {
	@include sprite($sprite);

	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) {
        @include sprite-image($sprite2x);
        @include sprite-background-size($sprite);
    }
}

usage.scss

div {
  @include sprite-retina($img, $img-2x);
}

This is amazing. Thank you!

Sorry , I don't understand where mixin 'sprite \ sprite-image' come from。
Hope to get help .
Thanks.