为什么CSS不支持常量？-Whydoesn'tCSSsupportconstants?

13  

The W3C issued a draft about CSS variables just one month after this answer has been edited the last time. And this month has brought that draft up to a Candidate Recommendation. It will stay in review at least until June 2016. A test suite is available.

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

So, all in all, CSS will have variables, also called "custom properties":

所以,总而言之,CSS会有变量,也称为“自定义属性”:

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. The production corresponds to this: it’s defined as any valid identifier that starts with two dashes. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.

自定义属性是名称以两个短划线(U + 002D HYPHEN-MINUS)开头的任何属性,如--foo。 生产对应于此:它被定义为以两个破折号开头的任何有效标识符。自定义属性仅供作者和用户使用; CSS永远不会给它们超出此处所示的含义。

Example 1

Custom properties define variables, referenced with the var() notation, which can be used for many purposes. For example, a page that consistently uses a small set of colors in its design can store the colors in custom properties and use them with variables:

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

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

The naming provides a mnemonic for the colors, prevents difficult-to-spot typos in the color codes, and if the theme colors are ever changed, focuses the change on one simple spot (the custom property value) rather than requiring many edits across all stylesheets in the webpage.

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

Unlike other CSS properties, custom property names are case-sensitive.

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

This feature is only implemented in Firefox and Chrome at the moment, and it will (probably) take quite some time until it's implemented in current browsers.

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

This is the original answer from March 2012. It pre-dates both the "official" W3C draft and the experimental browser implementations.

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

Why aren't CSS variables in CSS 1 or 2?

EDIT: This was already questioned to Håkon Wium Lie, the father of CSS (Opera Watchblog (Wayback machine)):

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

Bernie Zimmermann: Håkon, why doesn't CSS support constants? Being able to assign an RGB value to a constant, for instance, could make stylesheet maintenance a lot more manageable. Was it just an oversight?

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

Hakon: No, we thought about it. True, it would have saved some typing. However, there are also some downsides. First, the CSS syntax would have been more complex and more programming-like. Second, what would be the scope of the constant? The file? The document? Why? In the end we decided it wasn't worth it.

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

So it's not in the standard because they thought it wasn't worth it.

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

Workarounds

Constants or variables as you have defined are merely placeholders. Since such a placeholder makes only sense if it's used on the same declaration it's useless as grouping already provides this mechanism:

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

When several selectors share the same declarations, they may be grouped into a comma-separated list.^{CSS2:Grouping}

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

So instead of using a color in ten selectors, it's often better to collect common declarations and put them together. Instead of

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

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

use

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

.footer{
    color: blue;
}

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

Also use inheritance whenever possible.

也尽可能使用继承。

Note that you can declare almost some kind of variable if you're using abstract/simple classes like

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

.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;
}

This will enable you to use

这将使您能够使用

Ridiculos long class names

  
Yesterday I found a new hobby: Creating class names that are longer then most common words.

See also:

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

5  

Zeta’s answer is quite excellent—it certainly got my upvote—but I wanted to drop a note that a Working Draft for “CSS Variables” (constants with another name) was published just ten days ago:

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

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

I wouldn’t get too worked up about it as yet, since I suspect it will undergo changes and it’ll be a while before support is widespread. Still, there’s at least some movement in this direction.

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

2  

why weren't CSS constants ever introduced?

为什么不引入CSS常量?

CSS is not a programming language that's why. You could use LESS or SCSS to have variables.

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

1  

There's an argument for Colour Constants (we have a handful of predefined colour constants already anyway). Variables however lead to If statements, If statements lead to Functions, Functions lead to Javascript (and doobies).

颜色常数有一个参数(我们已经有了一些预定义的颜色常数)。然而,变量导致If语句,If语句导致函数,函数导致Javascript(和doobies)。

Though this article shows exactly how unnecessary a colour constant is in reality. If you're planning on making a theme colour place all your theme colour declarations in one statement, or as has been mentioned make a class just for your theme colour. The former does require splitting the selector definition however which doesn't smell nice, and the latter does seem extraneous when you already have a class applied to the tag.

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

I see no need for other Constants in a well designed sheet. Numerous dimensional repetition indicates poor structure/design.

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