Skip to content

Instantly share code, notes, and snippets.

@squallstar
Last active January 10, 2016 11:10
Show Gist options
  • Save squallstar/6652441 to your computer and use it in GitHub Desktop.
Save squallstar/6652441 to your computer and use it in GitHub Desktop.
Retina images with Grunt

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

//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
}
}
@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);
}
}
div {
@include sprite-retina($img, $img-2x);
}
@SunLn
Copy link

SunLn commented Apr 13, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment