当前状态[2015年12月更新]

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在最后一次编辑此答案后一个月发出了draft about CSS variables。这个月has brought that draft up to a Candidate Recommendation。它将至少在2016年6月之前继续进行审核。test suite可用。

总而言之，CSS 将有变量，也称为"custom properties"：

自定义属性是任何名称以两个破折号（U + 002D HYPHEN-MINUS）开头的属性，如--foo。 <custom-property-name>   生产对应于此：它被定义为以两个破折号开头的任何有效标识符。 Custom properties仅供作者和用户使用;除了这里提供的内容之外，CSS永远不会给它们带来意义。

示例1

自定义属性定义变量，以var()表示法引用，可用于多种用途。例如，在设计中始终使用一小组颜色的页面可以将颜色存储在自定义属性中，并将它们与变量一起使用：
:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}
命名为颜色提供了助记符，防止了颜色代码中难以发生的拼写错误，如果主题颜色发生了变化，则将更改集中在一个简单的位置（自定义属性值）而不是需要很多编辑网页中的所有样式表。

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

此功能目前仅在Firefox and 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:Grouping}

因此，不是在十个选择器中使用颜色，而是通常更好地收集常见声明并将它们放在一起。而不是

.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’s answer非常出色 - 它肯定得到了我的upvote - 但我想删掉一个注释，即“CSS变量”（具有其他名称的常量）的工作草案仅在十天前发布：

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

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

Answer 3

为什么没有引入CSS常量？

CSS不是一种编程语言，这就是原因。您可以使用LESS或SCSS来获取变量。

Answer 4

有颜色常数的参数（我们已经有一些预定义的颜色常数）。然而，变量导致If语句，If语句导致函数，函数导致Javascript（和doobies）。

虽然this article确切地显示了实际上颜色常数是多么不必要。如果您计划制作主题颜色，请将所有主题颜色声明放在一个语句中，或者如上所述，为您的主题颜色创建一个类。前者确实需要拆分选择器定义，但这种定义并不好看，后者在你已经将一个类应用于标签时确实看起来无关紧要。

我认为在精心设计的表格中不需要其他常量。许多尺寸重复表明结构/设计不良。

为什么CSS不支持常量？

4 个答案:

当前状态[2015年12月更新]

示例1

2012年的老答案

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

变通方法