Question

我正在尝试创建一个大型团队经常使用的精灵。我想自动创建它，这样任何人都可以将新图标放入/ source文件夹并运行任务来更新sprite和相应的CSS文件。

我一直在使用grunt-spritesmith，它工作正常，但它不支持自动添加：悬停规则。我也试过grunt-iconizr和grunt-svg-sprite。后者支持悬停（通过命名你的文件，如foo.png，foo~hover.png），但仅适用于SVG文件作为输入（我没有）。

我也尝试过安装Glue，但我无法安装并在我的机器上正常运行。

任何人都可以推荐仅使用PNG文件作为输入的解决方案，并在输出sprite / css上支持伪类吗？

Answer 1

这正是Compass Sprites所做的。它从.png图像的文件夹创建一个精灵图像，它通过命名你的文件star.png和star_hover.png来支持伪类

Answer 2

我已经解决了这个问题，用后缀-on命名悬停的图像例如：arrow-on.png 在gruntfile.js中，我创建了一个规则＆＃34; CssVarMap＆＃34;控制是否后缀＆＃34; -on＆＃34;存在。如果为true，则添加＆＃34;：hover＆＃34;到css输出：

//spritesmith
sprite:{
  all: {
    src: 'srcfolder/*.png',
    dest: 'dest/skin.png',
    destCss: 'css/skin.css',
    cssVarMap: function (sprite) {
      if(sprite.name.substr(-3)=="-on"){
        sprite.name = sprite.name.substr(0, sprite.name.length -3)
        sprite.name = sprite.name + ":hover";
      }
    },    
  }
}

无法找到一种方法来自动化/ grunt CSS精灵创建，它支持使用PNG源文件的悬停效果

2 个答案: