How I use Spritesmith to with retina displays on my Yeoman setup. https://github.com/Ensighten/grunt-spritesmith

gruntfile.js

  grunt.initConfig({
    sprite: {
      sprite_large: {
        src: '<%= yeoman.app %>/images/sprites-2x/*.{png,jpg,gif}',
        destImg: '<%= yeoman.app %>/images/sprites-2x.png',
        destCSS: '<%= yeoman.app %>/styles/_sprites-2x.scss',
        imgPath: '../images/sprites-2x.png',
        'cssVarMap': function (sprite) {
          sprite.name = 'sprite-' + sprite.name;
        },
        'engineOpts': {
          'imagemagick': true
        },
      },
      sprite: {
        src: '<%= yeoman.app %>/images/sprites/*.{png,jpg,gif}',
        destImg: '<%= yeoman.app %>/images/sprites.png',
        destCSS: '<%= yeoman.app %>/styles/_sprites.scss',
        imgPath: '../images/sprites.png',
        'cssVarMap': function (sprite) {
          sprite.name = 'sprite-' + sprite.name;
        },
        'engineOpts': {
          'imagemagick': true
        },
      }
    },
  })

retina.scss

@mixin sprite-2x($sprite2x, $sprite1x) {
  @include sprite($sprite2x);
  @include sprite-position($sprite1x);
  @include sprite-height($sprite1x);
  @include sprite-width($sprite1x);
  @include sprite-background-size($sprite1x);
}

// usage
.icon-cart {
  @include sprite($sprite-cart);
  
  @include mq-2x { //or whatver media query you prefer.
    @include sprite-2x($sprite-cart-2x, $sprite-cart);
  }
}