在.CSS文件中创建一个变量,以便在该.CSS文件中使用

Question

可能重复:
避免在CSS中重复的常量

我们有一些"主题颜色"可以在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)来避免重复值,从而使未来的样式更改难以置信地容易出错; 在寻求减少重复,忽略其当前值时,始终关注样式的上下文含义.

Answer 2

您可以通过使用Less CSS来实现它.

Answer 3

不,但Sass这样做.它是一个CSS预处理器,允许您使用大量快捷方式来减少需要编写的CSS数量.

例如:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

除了变量之外,它还提供了嵌套选择器的能力,保持逻辑分组:

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

还有更多:mixins有点像函数,有能力从另一个继承一个选择器.它非常聪明且非常有用.

如果您使用Ruby on Rails进行编码,它甚至会自动将其编译为CSS,但也有一个通用编译器可以按需为您执行.

Answer 4

你不是第一个想知道,答案是否定的.艾略特对此有一个很好的咆哮:http://cafe.elharo.com/web/css-repeats-itself/.您可以使用JSP或其等价物在运行时生成CSS.