在.CSS文件中创建一个变量，以在该.CSS文件中使用[重复]

Question

我们有一些“主题颜色”可在CSS表中重复使用。

有没有设置变量然后再使用的方法？

例如

.css
OurColor: Blue

H1 { 
 color:OurColor;
}

Answer 1

不需要选择器的所有样式都驻留在一个规则中，并且一个规则可以应用于多个选择器…因此，将其 翻转 ：

/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }

/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }

/* ... */

/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }

/* ... */

/* H1-specific styles */
H1
{ 
   font-size: 2em; 
   margin-bottom: 1em;
}

这样，您可以避免重复在 概念 上相同的样式，同时还要清楚说明它们影响文档的哪些部分。

请注意最后一句中对“概念上”的强调…这只是出现在注释中，所以我将对此加以扩展，因为多年来我已经看到人们一次又一次地犯同样的错误-甚至早于CSS的存在：
两个属性共享相同的值并不一定意味着它们表示相同的 概念 。傍晚天空可能看起来是红色的，西红柿也一样-
但是出于相同的原因，天空和西红柿也不是红色的，它们的颜色 会
随时间而独立变化。同样，仅仅是因为您在样式表中碰巧有两个元素具有相同的颜色，大小或位置，并不意味着它们将 始终
分享这些价值观。天真的设计师使用分组（如此处所述）或诸如SASS或LESS之类的变量处理器来避免 价值
重复的风险，这会导致将来对样式的更改非常容易出错。寻求减少重复时，始终将注意力放在样式的 上下文意义 上，而忽略了样式的 当前值 。