0

我正在尝试转换为面向对象的 CSS。我正在寻找定义颜色：

/* COLOURS */
.gray5: { color: #4C4C4C; }
.gray4: { color: #333333; }
.gray3: { color: #999999; }
.gray2: { color: #808080; }
.gray1: { color: #F5F5F5; }
.white: { color: #FFFFFF; }

问题是，我想像这样定义我的颜色，但我只能像这样定义文本颜色。是否不可能这样做，所以我可以在文本或 div 上使用这个“颜色”定义？我宁愿不必这样做......：

/* DIV COLOURS */
.gray5: { background-color: #4C4C4C; }
.gray4: { background-color: #333333; }
.gray3: { background-color: #999999; }
.gray2: { background-color: #808080; }
.gray1: { background-color: #F5F5F5; }
.white: { background-color: #FFFFFF; }

/* TEXT COLOURS */
.tgray5: { color: #4C4C4C; }
.tgray4: { color: #333333; }
.tgray3: { color: #999999; }
.tgray2: { color: #808080; }
.tgray1: { color: #F5F5F5; }
.twhite: { color: #FFFFFF; }

感谢您的任何意见！

4

1 回答 1

2

目前有一个 CSS 变量规范正在经历早期规范阶段，它将帮助您处理这类事情（与 SASS 或 LESS 相同）。

然而，在任何浏览器支持它之前还需要一段时间，甚至在足够多的浏览器支持它以在现实世界中使用之前更长时间。在那之前，SASS 和 LESS 是您最好的选择。

参考：

于 2012-10-06T19:42:47.750 回答