为什么CSS不支持常量？

Question

CSS从未直接支持常量或变量.每当我写这样的代码时:

span.class1 {
  color: #377fb6;
}

div.class2 {
  border: solid 1px #377fb6; /* Repeated color */
}

我想知道为什么这个看似简单的功能从未成为标准.实施一项我们可以避免重复的计划可能有些困难,例如:

$theme_color1: #377fb6;

span.class1 {
  color: $theme_color1;
}

div.class2 {
  border: solid 1px $theme_color1;
}

我知道有一些解决方法,比如为每种颜色使用一个类或从模板生成CSS代码,但我的问题是:鉴于CSS是如此丰富和复杂,为什么不引入CSS常量？

Answer 1

现状[2015年12月更新]

W3C 在上次编辑此答案一个月后发布了关于CSS变量的草稿.本月将该草案提交给候选人推荐书.它将至少在2016年6月之前继续进行审核.可以使用测试套件.

总而言之,CSS 将有变量,也称为"自定义属性":

一个自定义属性是任何属性的名字以两个破折号(U + 002D连字符-减号)开始,喜欢--foo.该<custom-property-name> 生产对应于此:它定义为以两个破折号开始任何有效的标识符.自定义属性仅供作者和用户使用; 除了这里提供的内容之外,CSS永远不会给它们带来意义.

例1

自定义属性定义变量,使用var()表示法引用,可用于多种用途.例如,在设计中始终使用一小组颜色的页面可以将颜色存储在自定义属性中,并将它们与变量一起使用:

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

命名为颜色提供了助记符,防止了颜色代码中难以发生的拼写错误,如果主题颜色发生变化,则将更改集中在一个简单的位置(自定义属性值),而不是需要对所有内容进行多次编辑网页中的样式表.

与其他CSS属性不同,自定义属性名称区分大小写.

此功能目前仅在Firefox和Chrome中实现,并且(可能)需要相当长的时间才能在当前浏览器中实现.

2012年的老答案

这是2012年3月的原始答案.它早于"官方"W3C草案和实验性浏览器实施.

为什么CSS 1或2中没有CSS变量？

编辑:这已经被问到CSS之父HåkonWiumLie(Opera Watchblog(Wayback machine)):

Bernie Zimmermann: Håkon,为什么CSS不支持常量？例如,能够将RGB值分配给常量可以使样式表维护更易于管理.这只是一个疏忽吗？

Hakon:不,我们考虑过了.没错,它可以节省一些打字.但是,也存在一些缺点.首先,CSS语法会更复杂,更像编程.第二,常数的范围是什么？文件？该文件？为什么？最后我们认为这不值得.

所以它不符合标准,因为他们认为这不值得.

解决方法

您定义的常量或变量仅仅是占位符.由于这样的占位符只在同一个声明中使用它才有意义,因为分组已经提供了这种机制:

当多个选择器共享相同的声明时,它们可以分组为以逗号分隔的列表.^CSS2:分组

因此,不是在十个选择器中使用颜色,而是收集常见声明并将它们组合在一起通常更好.代替

.header{
    color: red;
}
.section:nth-of-type(2n) > .ridi.culous > .article:hover{
    color: red;
}
.footer{
    color: blue;
    border: 1px solid blue;
}

使用

/* Color definitions */
.header,
.section:nth-of-type(2n) > .ridi.culous > .article:hover{
    color: red;
}

.footer{
    color: blue;
}

/* border definitions */
.footer{
    border: 1px solid;
}

也尽可能使用继承.

请注意,如果您使用的是抽象/简单类,则可以声明几乎某种变量

.margin5em{
    margin: 5em;
}
.corporateIdentityBackgroundColor{
    background-color: #881200;
}
.corporateIdentityBackgroundImage{
    background-image: url(we/are/awesome/corporation);
}
.backgroundCenter{
    background-position: center center;
}
.backgroundNoRepeat{
    background-repeat: no-repeat;
}

这将使您能够使用

<div class="corporateIdentityBackgroundImage backgroundCenter backgroundNoRepeat">Ridiculos long class names</div>
<div class="article">
  <p class="margin5em">Yesterday I found a new hobby: Creating class names that are longer then most common words.</p>
</div>

也可以看看:

• http://icant.co.uk/articles/cssconstants/

Answer 2

Zeta的答案非常出色 - 它肯定得到了我的支持 - 但我想删掉一个注释,即"CSS变量"的工作草案(具有其他名称的常量)仅在十天前发布:

http://dev.w3.org/csswg/css-variables/

我不会对它进行过多的努力,因为我怀疑它会发生变化,而且在支持普及之前还需要一段时间.不过,至少在这个方向上有一些动作.