Answer the question
In order to leave comments, you need to log in
How to automatically make the :hover state in gulp.spritesmith?
There are a bunch of icons (example.png), some of them have a _hover suffix (example_hovered.png).
Gathering everything into a sprite with Gulp
gulp.task('pngSprite', function () {
var spriteData = gulp.src(path.pngSprite.src)
.pipe(spritesmith({
imgName : 'sprite.png',
retinaSrcFilter: path.pngSprite.retinaSrcFilter,
retinaImgName: '[email protected]',
cssName : 'spritesmith.scss',
imgPath : path.pngSprite.imgLocation,
retinaImgPath : path.pngSprite.retinaImgLocation,
padding : 60,
cssVarMap : function(sprite) {
sprite.name = 'png-icon_' + sprite.name;
}
}));
spriteData.img.pipe(gulp.dest(path.pngSprite.buildImg));
return spriteData.css.pipe(gulp.dest(path.pngSprite.buildFile));
});
@include retina-sprites($retina-groups);
.png-icon_windows:hover {
@extend .png-icon_windows_hovered;
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question