css - 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 变量，假设它包含图像源。

您可以将脚本替换为您的语言语法。