我使用 Compass 生成 Image Sprites 和 CSS。
这很好用，但是，因为我要生成大量的 Sprite 图像和 CSS，将图像映射到类名对我自己和其他开发人员来说可能要花费相当多的时间。
我目前在 DreamWeaver 中创建了一些正则表达式，以允许我生成一个显示图像及其相应类名的 HTML 页面，但是，这不是最好的布局，因为它只是将它们列在 float div 中，并且我更愿意使用表格以表格格式或每行 7 个 div 的组显示它们。
我的代码目前看起来像...
...
<body>
<table>
<td class="sprite-container">
<div class="sprite-image myimage001"></div>
<div class="sprite-label">myimage001</div>
</td>
<td ... and so on...
我想要一个正则表达式来用 TR 标签包装 TD 内容的每组 7 个实例，这样它就会显得整洁。 (我也只使用 div 等完成了，但由于我是手动完成的，所以这是最容易维护的)
我目前一直在手动执行此操作...从 td 组中每 30 行计算一次并插入标签...这很单调，而且由于我正在处理 800 多个类，因此需要相当长的时间才能完成... .而且我每次重新生成 Sprite 时都必须重做!啊!
或者，对于如何更好地解决这个问题，我愿意接受其他建议...即脚本、工具、ruby gem、正则表达式等。在此先感谢您的帮助。我希望其他人觉得这很有用。
注意: 我目前使用的过程是将 CSS 文件复制到一个新文档中。 我删除了所有错误的 CSS(多组)。 我通过查找替换运行以下正则表达式
查找 > \{[\w\W]*?\}
REPLACE > NOTHING
查找 > .(sprite[\S]*)\s
替换>
<td class="sprite-container">
<div class="sprite-image $1"></div>
<div class="sprite-label">$1</div>
</td>
然后我通过添加 CSS 引用、HTML 标记等进行手动编辑以使其正确显示。
再次感谢您提供的任何帮助!
最佳答案
最简单的方法是使用 DIV 而不是 TD。
<DIV class="sprite-container">
<div class="sprite-image $1"></div>
<div class="sprite-label">$1</div>
</DIV>
然后使用 CSS 为 sprite-container 设置样式。所需要的只是 Sprite 容器是 position: relative 和 float: left。
.sprite-container {
position: relative;
float: left;
margin: .5em;
min-width: 50px; min-height: 50px;
background-color: yellow;
}
然后使用 CSS :nth-child 使位于新一行 7 spite-container 开始的每个元素在 float 布局中强制中断。
.sprite-container:nth-child(7n+1) {
clear: left;
}
这是一个 jsfiddle。 http://jsfiddle.net/KQ59S/
关于html - 需要最佳实践帮助或 RegEx 建议来创建 Image Sprite 映射到 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20661995/