前言
css变量（官方称为自定义属性）是用户定义的值，它可以在你的代码库中设置一次并多次使用。它们使管理颜色、字体、大小和动画值变得更加容易，并确保整个web应用的一致性。

举个例子，你可以将品牌颜色设置为一个CSS属性（ –primarycolor: #7232FA ），并在任何使用品牌颜色的组件或样式中使用这个值（ background: var(–primarycolor); ）。

除了更加简洁以及不重复的代码，CSS变量可用于构建调色板，蓝狮注册开户提高响应能力，并创建动态类型系统。

定义CSS变量
要定义一个自定义属性，选择一个名称并在其前面加上两个连字符。任何字母数字字符都可以是名称的一部分。连字符（ – ）和下划线（ _ ）也是被允许的。大范围的Unicode字符可以成为自定义属性名称的一部分。这也包括emoji，但为了清晰度和可读性，请坚持使用字母数字名称。

下面是个例子：

–primarycolor: #0ad0f9ff; /* RGB alpha 16进制颜色 */
— 向CSS解释器表明这是一个自定义属性。当作为一个变量使用时，解释器引擎会将该属性替换为其值。

自定义属性名称是区分大小写的。这意味着 –primaryColor 和 –primarycolor 被认为是两种不同的属性名称。这与传统的CSS不同，在传统的CSS中，属性和值的大小写并不重要。然而，它与ECMAScript中的变量名规则是一致的。

与其他属性一样，比如说 display 或者 font ，蓝狮注册CSS自定义属性必须定义在声明块内。一个常见的模式是使用 :root 伪元素作为选择器来定义自定义属性。

:root {
–primarycolor: #0ad0f9ff;
}
:root 是一个伪元素，它指向文档中的根元素。对html文档而言，指向的就是 元素。对SVG文档而言，指向的就是 元素。使用 :root 会让属性在整个文档中立即可用。

使用CSS变量
为了让自定义属性作为变量来使用，我们需要使用 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自定义属性 VS CSS变量
“自定义属性”是一个面向未来的名称，它说明了这个功能有一天可能会被使用。然而，如果浏览器供应商实施了 CSS扩展 规范，这种情况就会改变。该规范定义了用自定义选择器组合、函数和 at-rules 来扩展CSS的方法。

我们通常称自定义属性为 “变量”，到目前为止，这也是我们可以使用它们的唯一方式。在理论上，它们并不是完全可以互换的术语。不过目前为止在实践中是可以互换的术语。在这篇文章中，我主要使用 自定义属性 ，因为那是它们的正确叫法。如果能是句子更加清晰，我将使用 变量 的叫法。

设置备用值
var() 函数接收两个参数。第一个参数是自定义属性名称。第二个参数是可选的，但必须是声明值。这个声明值的功能是当自定义属性值没有被定义时，作为一个备用值或默认值被应用。

让我们来看看下面的CSS：

.btn__call-to-action {
background: var(–accent-color, deepskyblue);
}
如果定义了 –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 {
–text-primary: #600;
–footer-link-hover: #0cg; /* Not a valid color value */
}
body {
color: var(–text-primary);
}
a:link {
color: blue;
}
a:hover {
color: red;
}
footer a:hover {
color: var(–footer-link-hover);
}
在这个例子中， –footer-link-hover 属性的值不是有效颜色。反而， footer a:hover 从 元素中继承了 color 值。

解析自定义属性的方式与解析其他CSS值的方式相同。倘若值是无效的或者未定义的，如果属性是可继承的，CSS解析器就会使用继承的值（比如说 color 或 font ）。如果属性是不可继承的，CSS解析器就会使用初始值（比如说 background-color ）。

层叠值
自定义属性也遵循层叠的规则。它们的值会被后续的规则所覆盖：

:root {
–text-color: #190736; /* navy / } body { –text-color: #333; / dark gray */
}
body {
color: var(–text-color);
}
在上述示例中， body 字体颜色将会是深灰色。我们还可以在每个选择器的基础上重置值。让我们向这个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)
}
在这个例子中，任何包裹在

标签内的文本会是橘黄色。但是

内的文本或是其他元素内的文本仍然是深灰色。

也可以使用 style 属性来设置自定义属性的值。比如说， 。

调色板
自定义属性特别适合管理HSL调色板。HSL代表 hue, saturation, lightness 。这是一款基于亮度的颜色模型，类似于RGB。我们可以在CSS中使用HSL，这要归功于 hsl() 和 hsla() 颜色函数。 hsl() 函数接收三个参数，分别是hue, saturation, 和 lightness，也就是色相、饱和度、亮度。 hsla() 函数同时接收第四个参数，表示颜色的 alpha 透明度（取值范围是0-1之间）。

RGB系统用红、绿、蓝的比例来表达颜色，而HSL则使用一个颜色圈，色相是该圈上的一个度数位置，而色调或阴影则用饱和度和亮度值来定义。饱和度的范围从0%到100%，其中0%是灰色，100%是全色。亮度的范围也是从0%到100%，其中0%是黑色，100%是白色，50%是正常颜色。

在HSL颜色系统中，主要颜色红、绿、蓝三原色在0度/360度、120度和240度处相距120度。二级颜色–青色、品红和黄色–也相距120度，但位于主要颜色的对面，分别为180度、300度和60度/420度。三级、四级和其他颜色则以大约10度的增量介于两者之间。蓝色用HSL来写的话，将会是 hsl(240, 100%, 50%) 。

HSL参数单位
当你在 hsl() 和 hsla() 函数的第一个参数中使用无单位的值时，浏览器会假定它是一个以度为单位的角度。然而，你可以使用任何 受支持的CSS角度单位 。蓝色也可以表示为 hsl(240deg, 100%, 50%) , hsl(4.188rad, 100%, 50%) 或者 hsla(0.66turn, 100%, 50%) 。

这就是有趣的地方。我们可以使用自定义属性设置色相值，以及通过调整饱和度和亮度来设置更亮和更暗的阴影：

:root {
–brand-hue: 270deg; /* purple / –brand-hue-alt: .25turn; / green */

/*
hsl()和hsla()可以接受逗号分隔的参数或空格分隔的参数。
但旧的浏览器（如Internet Explorer 11）只支持逗号分隔的参数。
*/

--brand-primary:   hsl( var( --brand-hue ) 100% 50% );
--brand-highlight: hsl( var( --brand-hue ) 100% 75% );
--brand-lowlight:  hsl( var( --brand-hue ) 100% 25% );
--brand-inactive:  hsl( var( --brand-hue )  50% 50% );

--brand-secondary:     hsl( var( --brand-hue-alt ) 100% 50% );
--brand-2nd-highlight: hsl( var( --brand-hue-alt ) 100% 75% );
--brand-2nd-lowlight:  hsl( var( --brand-hue-alt ) 100% 25% );
--brand-2nd-inactive:  hsl( var( --brand-hue-alt )  50% 50% );

}