Есть куча иконок (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-иконки приходится писать ручками класс (и еще следить за именами) — как это все автоматизировать?