V
V
Vladimir2018-05-30 20:06:49
Sprites
Vladimir, 2018-05-30 20:06:49

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));
});

I get spritesmith.scss and sprite.png, use spritesmith's standard mixin to convert it all into classes :
@include retina-sprites($retina-groups);
.png-icon_windows:hover {
  @extend .png-icon_windows_hovered;
}

Actually, this is the question: for each hover icon, you have to write a class with pens (and also follow the names) - how to automate all this?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question