多年来，变量一直是最常用的CSS特性之一。变量可以更容易地管理颜色、字体、大小和动画值，并确保它们在代码库中的一致性。 花了数年的时间来研究语法的细节，并决定变量如何适应管理级联和继承的现有规则。现在它们以CSS“自定义属性”的形式提供给开发人员。 在本章中，我们将讨论CSS自定义属性的语法。我们来看看：
- 如何定义属性并为这些属性设置默认值
- 级联和继承的规则如何与自定义属性一起工作
- 如何在媒体查询中使用自定义属性
最后，您应该很好地掌握了如何在项目中使用自定义属性。 注意:浏览器对自定义变量的支持是健壮的，存在于每个主流浏览器的最新版本中。然而，在较老但最近发布的浏览器版本中还没有支持，这些版本可能仍然被站点的受众广泛使用。微软15之前的Edge版本和9.1之前的Safari版本完全缺乏支持。任何版本的Internet Explorer都是如此。Microsoft Edge 15有支持，但也有一些文档记录的bug。
定义自定义属性
要定义自定义属性，请选择一个名称并在其前面加上两个连字符。任何字母数字字符都可以是名称的一部分。也允许使用连字符(-)和下划线(_)字符。广泛的unicode字符可以作为自定义属性名称的一部分，包括表情符号。为了清晰易读，请坚持使用字母数字名称。 这里有一个例子:
--primarycolor: #0ad0f9ff; /* Using #rrggbbaa color notation */
--向CSS解析器表明这是一个自定义属性。属性的值将替换作为变量使用的属性。 自定义属性名区分大小写。换句话说，--primaryColor和--primaryColor被认为是两个不同的属性名。这与传统的CSS有所不同，在传统CSS中，属性和值并不重要。然而，它与ECMAScript处理变量的方式是一致的。 与显示或字体等其他属性一样，CSS自定义属性必须在声明块中定义。一个常见的模式是在使用:root psuedo-element作为选择器的规则集中定义自定义属性:
:root {
–primarycolor: #0ad0f9ff;
}
:root是引用文档根元素的伪元素。对于HTML文档，这是HTML元素。对于SVG文档，它是SVG元素。通过使用:root，属性可以立即在整个文档中可用。 使用自定义属性 要使用自定义属性值作为变量，我们需要使用var()函数。例如，如果我们想使用--primarycolor自定义属性作为背景色，我们可以使用以下方法:
body {
background-color: var(–primarycolor);
}
我们自定义属性的值将成为background-color属性的计算值。 到目前为止，自定义属性只能用作为标准CSS属性设置值的变量。例如，您不能将属性名存储为变量，然后重用它。下面的CSS不工作:
:root {
–top-border: border-top; /* Can’t set a property as custom property’s value */
var(–top-border): 10px solid #bc84d8 /* Can’t use a variable as a property */
}
您也不能将属性-值对存储为变量并重用它。下面的例子也是无效的:
:root {
–text-color: ‘color: orange’; /* Invalid property value */
}
body {
var(–text-color); /* Invalid use of a property */
}
最后，您也不能将变量作为值字符串的一部分连接起来:
:root {
–base-font-size: 10;
}
body {
font: var(–base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax. */
}
定制属性被设计成根据CSS规范解析的属性。如果浏览器厂商采用CSS扩展规范，将来我们可以使用自定义属性来创建自定义选择器组或自定义at规则。但是，目前我们仅限于使用它们作为变量来设置标准属性值。 设置回滚值 var()函数实际上最多接受两个参数。第一个参数应该是自定义属性名。第二个参数是可选的，但应该是一个声明值。如果自定义属性值没有定义，则此声明值作为一种回退值。 让我们看看下面的CSS:
.btn__call-to-action {
background: var(–accent-color, salmon);
}
如果--accent-color被定义(假设它的值是#f30)那么具有.btn__call-to-action类属性的任何路径的填充颜色都将是红橙色的。如果没有定义，填充色将是橙红色。 声明值也可以嵌套。换句话说，您可以使用一个变量作为var函数的回退值：
body {
background-color: var(–books-bg, var(–arts-bg));
}
在上面的CSS中，如果--books-bg被定义，背景颜色将被设置为--books-bg属性的值。如果不是，背景颜色将改为指定的任何值--arts-bg。如果它们都没有定义，背景颜色将是属性的初始值——在本例中是transparent。 当自定义属性被赋予一个值，而该值对于它所使用的属性无效时，也会发生类似的情况。考虑以下CSS:
:root {
–footer-link-hover: #0cg; /* Not a valid color value. */
}
a:link {
color: blue;
}
a:hover {
color: red;
}
footer a:hover {
color: var(–footer-link-hover);
}
在这种情况下，--footer-link-hover属性的值不是有效颜色。在microsoftedge中，页脚链接的悬停状态颜色将从a:hover选择器继承。在大多数其他浏览器中，悬停状态颜色将继承body元素的文本颜色。 自定义属性和级联 自定义属性也遵循级联规则。它们的值可以被后续规则覆盖:
:root {
–text-color: #190736; /* navy */
}
body {
–text-color: #333; /* Dark gray */
}
body {
color: var(–text-color);
}
在上面的例子中，我们的正文是深灰色的。我们还可以在每个选择器的基础上重置值。让我们添加更多的规则到这个CSS:
:root {
–text-color: #190736; /* navy */
}
body {
–text-color: #333; /* Dark gray */
}
p {
–text-color: #f60; /* Orange */
}
body {
color: var(–text-color);
}
p {
color: var(–text-color)
}
在本例中，包装在p元素标记中的任何文本都是橙色的。但是div或其他元素中的文本仍然是深灰色的。 还可以使用style属性(例如style="--brand-color: #9a09af")设置自定义属性的值，这在基于组件的前端体系结构中非常有用。
