一尘不染

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

css

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

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

例如

.css
OurColor: Blue

H1 { 
 color:OurColor;
}

阅读 282

收藏
2020-05-16

共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之类的变量处理器来避免 价值
重复的风险,这会导致将来对样式的更改非常容易出错。寻求减少重复时,始终将注意力放在样式的 上下文意义 上,而忽略了样式的 当前值

2020-05-16