Question

我正在尝试转换为面向对象的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; }

感谢您的任何意见！

Answer 1

目前有一个CSS变量规范正在经历早期的规范阶段，这将帮助你完成这类事情（与SASS或LESS一样）。

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

参考：

面向对象的CSS - 定义颜色

1 个答案: