Как в gulp.spritesmith автоматически сделать состояние :hover?

Есть куча иконок (example.png), некоторые из них имеют суффикс _hover (example_hovered.png).

Собираю все в спрайт Галпом
gulp.task('pngSprite', function () {
    var spriteData = gulp.src(path.pngSprite.src)
    .pipe(spritesmith({
        imgName : 'sprite.png',
        retinaSrcFilter: path.pngSprite.retinaSrcFilter,
        retinaImgName: 'sprite@2x.png',
        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));
});


Получаю spritesmith.scss и sprite.png, использую стандартный миксин  spritesmith'а для преобразования всего этого в классы:
@include retina-sprites($retina-groups);

А иконки с состоянием :hover делаю так (в этом и вопрос):
.png-icon_windows:hover {
  @extend .png-icon_windows_hovered;
}

Собственно, в этом и вопрос: для каждой hover-иконки приходится писать ручками класс (и еще следить за именами) — как это все автоматизировать?
  • Вопрос задан
  • 62 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы