多年来，变量是最常请求的CSS功能之一。变量可以更轻松地管理颜色，字体，大小和动画值，并确保它们在代码库中的一致性。 花了几年时间研究语法的细节，并决定变量如何适应控制级联和继承的现有规则。现在，它们以CSS“自定义属性”的形式供开发人员使用。 在本章中，我们将讨论CSS自定义属性的语法。我们来看看：
- 如何定义属性并为这些属性设置默认值 级联和继承的规则如何与自定义属性一起使用 如何在媒体查询中使用自定义属性 最后，您应该很好地掌握如何在项目中使用自定义属性。
注意：浏览器对自定义变量的支持非常强大，存在于每个主要浏览器的最新版本中。但是，旧版但最近发布的浏览器版本仍然不支持这些版本，这些版本可能仍会被您网站的受众广泛使用。15之前的Microsoft Edge版本和9.1版之前的Safari版本完全缺乏支持。任何版本的Internet Explorer都是如此。Microsoft Edge 15有支持，但也有一些记录的错误。
定义自定义属性
要定义自定义属性，请选择一个名称，并使用两个连字符作为前缀。任何字母数字字符都可以是名称的一部分。也允许使用连字符（-）和下划线（_）字符。广泛的unicode字符可以是自定义属性名称的一部分，包括emojis。为了清晰和可读性，请坚持使用字母数字名称。 这是一个例子：
--primarycolor: #0ad0f9ff; /* Using #rrggbbaa color notation */
该–指示的CSS解析器，这是一个自定义属性。无论将属性用作变量，属性的值都将替换该属性。 自定义属性名称区分大小写。换句话说，–primaryColor并且–primarycolor被认为是两个不同的属性名称。这与传统的CSS背道而驰，其中财产和价值案例并不重要。但是，它与ECMAScript处理变量的方式一致。 与其他属性（如displayor）一样font，必须在声明块中定义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扩展规范，我们有一天可能会使用自定义属性来创建自定义选择器组或自定义规则。但是，目前我们仅限于将它们用作变量来设置标准属性值。
设置后备值
该var()函数实际上最多接受两个参数。第一个参数应该是自定义属性名称。第二个参数是可选的，但应该是声明值。如果尚未定义自定义属性值，则此声明值将用作一种回退值。 我们来看下面的CSS：
.btn__call-to-action {
background: var(–accent-color, salmon);
}
如果–accent-color已定义 - 让我们说它的值是#f30- 然后具有.btn__call-to-actionclass属性的任何路径的填充颜色将具有红橙色填充。如果没有定义，填充将是鲑鱼。 声明值也可以嵌套。换句话说，您可以使用变量作为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属性的值不是有效颜色。在Microsoft Edge中，页脚链接的悬停状态颜色将从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”- 这在基于组件的前端体系结构中很有用。
