CSS变量减少CSS文件

Question

我有

.excel { background-image:url(/image/icon/silk/excel.png) !important }

我可以使用变量代替 excel 吗？因此，我不需要为所有1200个图标制作CSS文件。

Answer 1

不，但您可以使用CSS图像精灵：http://css-tricks.com/css-sprites/并定义背景位置。或者你可以获得LESS，它依赖于Javascript：http://lesscss.org/。 LESS允许您为颜色，类名等设置变量，但并非所有浏览器都支持它，这是缺点。然而，它越来越受欢迎，所以值得一试！

Answer 2

没有。这是不可能的。

您可以构建内联的CSS样式

<div style = "background-image:url(<%=imageSrc%>) !important">
</div>

这里我使用了JSP Scriplet。 imageSrc是一个Java变量，假设它包含图像Source。

您只需用您的语言语法替换scriplet。