html - 面向对象的 CSS - 定义颜色

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 是您最好的选择。

引用:

• > http://www.w3.org/TR/css-variables/
• > http://www.xanthir.com/blog/b4KT0