CSS变量简介

CSS 变量简介
如今的浏览器开发似乎正好取代了流行的库和扩展目前为我们提供的功能。ECMAScript 6 几乎完全没有 jQuery，而十字线中的下一个似乎是 CSS 预处理器，如 SASS 和 LESS。现代版 Firefox 和 Chrome 支持 CSS 变量（也称为 CSS 自定义属性），允许您直接在 CSS 中定义变量，然后可以在样式表中的任何位置引用变量，甚至可以使用 JavaScript 进行操作。结果是一个类固醇的 CSS 预处理器，一个在浏览器中本机运行以启动。随着 IE Edge 希望尽快支持这一功能，这些令人兴奋的时刻确实是一个前端开发人员。让我们看看本教程中的 CSS 变量是什么。

基本语法
使用 CSS 变量是一个简单的两步过程：

使用语法在选择器内定义 CSS 变量 –myvariable。选择器根据正常的 CSS 继承和特异性规则确定变量的范围及其适用的位置。:root 例如，在选择器内定义的 CSS 变量可用于文档中的所有较低级别选择器（元素）。
使用语法引用 CSS 变量 var(–myvariable) 作为静态 CSS 属性值的替代。
现在让我们看一个基本的例子，把踏板放到金属上！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/ Define CSS variables and scope /
:root{

--maincolor: black;
--secondarycolor: crimson;

}

/ Use CSS Variables /
body{

background: var(--maincolor);
color: white;

}

body p{

background: var(--secondarycolor);

}
这里我定义了两个包含:root 选择器内部颜色值的 CSS 变量。内部定义变量的选择器设置其范围，所有降序选择器（元素）都能够访问这些变量。在:root 选择器中定义 CSS 变量基本上使它们全局可用。此时，变量尚未应用于任何地方，处于休眠状态并准备好使用。需要注意的是 CSS 变量情况不像其他的 CSS 属性敏感，因此 –maincolor 和 –Maincolor 被认为是两个不同的变量。

要使用 CSS 变量，我们使用 var() 函数访问其值，方法是将变量名称传递给它。然后，我们选择所需的 CSS 属性来利用此变量的值。

您甚至可以将一个 CSS 变量的值全部或部分设置为另一个 CSS 变量：

1
2
3
4
5
6
7
8
9
10
11
/ Define CSS variables and scope /
:root{

--darkfont: brown;
--darkborder: 5px dashed var(--darkfont);

}

/ Use CSS Variables /
div.container{

color: var(--darkfont);
border: var(--darkborder);

}
CSS 变量的级联和继承
CSS 变量的行为与其他 CSS 属性非常相似，因为它们的值级联和继承，与使用 CSS 预处理器定义的属性不同。以下演示了使用 CSS 变量进行级联：

1
2
3
4
5
6
7
8
9
10
11
root{

--darkborder: 5px solid black;

}

body{

--darkborder: 1px solid darkred;

}

img{

border: var(--darkborder); /* img border will be 1px solid red */

}
在这里，我 –darkborder 在两个不同的选择器中两次定义了相同的 CSS 变量。由于级联规则，BODY 选择器内部的规则具有更高的特异性，并且在 IMG 元素中使用时会胜出。

CSS 变量也默认继承，因此在父元素上定义的 CSS 属性的值在这些元素中使用时会向下渗透到子元素。我们在下面的示例中看到了这一点，其中使用 UL 元素上的 CSS 变量定义的 UL 边界也自动应用于子 UL：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
:root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

margin-left: 30px;

}
输出截图：

Click screenshot to see live example

禁用继承
我们可以通过将 CSS 变量设置 initial 为所需选择器内的特殊值“”来阻止 CSS 变量在某个级别继承。这样做会将该属性重置为在该范围级别默认为“空”。例如，要通用地禁用 CSS 变量的继承，我们可以执行以下操作：

1
2
3
*{

--somevar: initial; /* disable inheritance for --somevar variable everywhere */

}
考虑下一个示例，该示例禁用 –myborder UL UL 级别的变量继承，因此在 UL 级别应用的变量不会向下传递到其后代:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:root{

--myborder:CSS 变量简介

如今的浏览器开发似乎正好取代了流行的库和扩展目前为我们提供的功能。ECMAScript 6 几乎完全没有 jQuery，而十字线中的下一个似乎是 CSS 预处理器，如 SASS 和 LESS。现代版 Firefox 和 Chrome 支持 CSS 变量（也称为 CSS 自定义属性），允许您直接在 CSS 中定义变量，然后可以在样式表中的任何位置引用变量，甚至可以使用 JavaScript 进行操作。结果是一个类固醇的 CSS 预处理器，一个在浏览器中本机运行以启动。随着 IE Edge 希望尽快支持这一功能，这些令人兴奋的时刻确实是一个前端开发人员。让我们看看本教程中的 CSS 变量是什么。

基本语法
使用 CSS 变量是一个简单的两步过程：

使用语法在选择器内定义 CSS 变量 –myvariable。选择器根据正常的 CSS 继承和特异性规则确定变量的范围及其适用的位置。:root 例如，在选择器内定义的 CSS 变量可用于文档中的所有较低级别选择器（元素）。
使用语法引用 CSS 变量 var(–myvariable) 作为静态 CSS 属性值的替代。
现在让我们看一个基本的例子，把踏板放到金属上！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/ Define CSS variables and scope /
:root{

--maincolor: black;
--secondarycolor: crimson;

}

/ Use CSS Variables /
body{

background: var(--maincolor);
color: white;

}

body p{

background: var(--secondarycolor);

}
这里我定义了两个包含:root 选择器内部颜色值的 CSS 变量。内部定义变量的选择器设置其范围，所有降序选择器（元素）都能够访问这些变量。在:root 选择器中定义 CSS 变量基本上使它们全局可用。此时，变量尚未应用于任何地方，处于休眠状态并准备好使用。需要注意的是 CSS 变量情况不像其他的 CSS 属性敏感，因此 –maincolor 和 –Maincolor 被认为是两个不同的变量。

要使用 CSS 变量，我们使用 var() 函数访问其值，方法是将变量名称传递给它。然后，我们选择所需的 CSS 属性来利用此变量的值。

您甚至可以将一个 CSS 变量的值全部或部分设置为另一个 CSS 变量：

1
2
3
4
5
6
7
8
9
10
11
/ Define CSS variables and scope /
:root{

--darkfont: brown;
--darkborder: 5px dashed var(--darkfont);

}

/ Use CSS Variables /
div.container{

color: var(--darkfont);
border: var(--darkborder);

}
CSS 变量的级联和继承
CSS 变量的行为与其他 CSS 属性非常相似，因为它们的值级联和继承，与使用 CSS 预处理器定义的属性不同。以下演示了使用 CSS 变量进行级联：

1
2
3
4
5
6
7
8
9
10
11
root{

--darkborder: 5px solid black;

}

body{

--darkborder: 1px solid darkred;

}

img{

border: var(--darkborder); /* img border will be 1px solid red */

}
在这里，我 –darkborder 在两个不同的选择器中两次定义了相同的 CSS 变量。由于级联规则，BODY 选择器内部的规则具有更高的特异性，并且在 IMG 元素中使用时会胜出。

CSS 变量也默认继承，因此在父元素上定义的 CSS 属性的值在这些元素中使用时会向下渗透到子元素。我们在下面的示例中看到了这一点，其中使用 UL 元素上的 CSS 变量定义的 UL 边界也自动应用于子 UL：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
:root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

margin-left: 30px;

}
输出截图：

Click screenshot to see live example

禁用继承
我们可以通过将 CSS 变量设置 initial 为所需选择器内的特殊值“”来阻止 CSS 变量在某个级别继承。这样做会将该属性重置为在该范围级别默认为“空”。例如，要通用地禁用 CSS 变量的继承，我们可以执行以下操作：

1
2
3
*{

--somevar: initial; /* disable inheritance for --somevar variable everywhere */

}
考虑下一个示例，该示例禁用 –myborder UL UL 级别的变量继承，因此在 UL 级别应用的变量不会向下传递到其后代:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

--myborder: initial; /* reset --myborder variable */
margin-left: 30px;

}
输出截图：

点击屏幕截图查看实时示例

重置 CSS 变量的值使您可以使用干净的平板，其中有多个 CSS 作者在页面上工作，并且可能存在重复的变量名称和非预期的继承。

使用 calc（）函数构建值
CSS 变量也可以与函数一起使用，因此数值可以是动态的，使 CSS 变量更接近 JavaScript 变量：calc()

1
2
3
4
5
6
7
8
9
10
11
:root{

--bottomgap: 30;

}

h1{

margin-bottom: calc(var(--bottomgap) * 1px)

}

h2{

margin-bottom: calc(var(--bottomgap) * .5px) /* half of H1 gap */

}

这里我将一个 CSS 变量设置为一个数字，然后使用该 calc()函数导出 H1 和 H2 元素的下边距，这样后者就是前一个元素的一半。在 calc()函数内部，为了导出实际单位（即：像素），我们对该单元执行乘法运算，例如乘以 –bottomgap1px。简单地将单元附加到变量的末尾将不起作用：

1
2
3
h1{

margin-bottom: calc(var(--bottomgap)px); /* doesn't work */

}
您也可以简单地设置 –bottomgap 为开始时的实际长度，例如 30px，并通过将 H2 除以 2 来计算 H2 元素的一半（除法运算的右侧必须始终为数字）。有关可接受语法的更多详细信息，请参阅该 函数。calc()

CSS 变量和 JavaScript
甚至可以使用 JavaScript 访问和设置 CSS 变量，通过仅更改 CSS 变量值来简化 CSS 样式的操作方式。以下是获取和设置 CSS 变量值的两种 JavaScript 方法，无论属性是直接在元素上定义还是继承：

1
2
getComputedStyle(element).getPropertyValue(‘–varname’) // get CSS variable value of an element, including any leading or trailing spaces
element.style.setProperty(‘–varname’, ‘newvalue’) // set CSS variable of an element to new value
要:root 在 JavaScript 中访问元素 / 选择器，请使用 document.documentElement。当 CSS 变量的值更改时，浏览器会自动重新绘制以反映更改。您甚至可以将一个 CSS 变量的值设置为另一个 CSS 变量，从而在 CSS 值之间创建相互依赖性，从而产生有趣的效果：

1
element.style.setProperty(‘–divheight’, ‘calc(var(–divwidth)/2)’) // set one CSS property to the value of another
以下示例通过仅使用 JavaScript 更新 CSS 变量来创建一个 CSS 条形时钟，该时钟告诉当前时间。每个 CSS 变量分别以当前的 24 小时，60 分钟或 60 秒的百分比形式输入当前的小时，分钟或秒。例如，下午 6 点将转换为 6 /24，或小时字段的 25%。我们使用这些值来确定每个条中要移动（变换）的背景伪元素的数量。结果如下：

JavaScript 与 CSS 之间的唯一交互是 CSS 变量本身 – CSS 变量为 JavaScript 开辟了一种新的，可以说是更清晰的方式来操纵 CSS。

内联设置 CSS 变量
CSS 变量也可以在元素上内联定义或设置，这样您就可以调整单个元素的 CSS 变量值。假设您已在样式表中设置了两个 CSS 变量，以定义 UL 内链接的静止和悬停背景颜色。但是，对于特定链接，您希望两种颜色与其他颜色不同。覆盖链接中两个 CSS 变量的默认值将是一种方法：

1
Home
Here is a working demo of this:

定义未定义 CSS 变量时的回退值
当使用带有该 var(–cssvariable)函数的 CSS 变量时，可以使用第二个参数填充该函数，该参数在未定义进程变量的情况下成为回退值。例如：

​1
2
background: var(–primarybg, white); / Normal value as fallback value /
font-size: var(–defaultsize, var(–fallbacksize, 36px)); / var() as fallback value /
如您所见，回退值本身可以是另一个 CSS var() 函数，在未定义变量的情况下，该函数又可以包含另一个回退值。

CSS 变量回退显然只能由支持 CSS 变量的浏览器获取。要为不支持该功能的浏览器提供后备值，您可以执行以下操作：

1
2
background: white; / background value for browsers that don’t support CSS variables /
background: var(–primarybg, white);
现在大家都开心了！

结论
像 SASS 这样的 CSS 预处理器在前端开发人员中得到了广泛的采用，尽管它们的编译本身固有地限制了它们的功能。与 CSS 预处理器不同，CSS 变量是常规，级联和继承，就像常规 CSS 属性一样，甚至可以使用 JavaScript 进行操作。但也许 CSS 变量的最大优点是浏览器本身支持它们，消除了即使是新手 Web 开发人员潜入的任何技术障碍。

5px solid orange;
}CSS 变量简介
如今的浏览器开发似乎正好取代了流行的库和扩展目前为我们提供的功能。ECMAScript 6 几乎完全没有 jQuery，而十字线中的下一个似乎是 CSS 预处理器，如 SASS 和 LESS。现代版 Firefox 和 Chrome 支持 CSS 变量（也称为 CSS 自定义属性），允许您直接在 CSS 中定义变量，然后可以在样式表中的任何位置引用变量，甚至可以使用 JavaScript 进行操作。结果是一个类固醇的 CSS 预处理器，一个在浏览器中本机运行以启动。随着 IE Edge 希望尽快支持这一功能，这些令人兴奋的时刻确实是一个前端开发人员。让我们看看本教程中的 CSS 变量是什么。

基本语法
使用 CSS 变量是一个简单的两步过程：

使用语法在选择器内定义 CSS 变量 –myvariable。选择器根据正常的 CSS 继承和特异性规则确定变量的范围及其适用的位置。:root 例如，在选择器内定义的 CSS 变量可用于文档中的所有较低级别选择器（元素）。
使用语法引用 CSS 变量 var(–myvariable) 作为静态 CSS 属性值的替代。
现在让我们看一个基本的例子，把踏板放到金属上！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/ Define CSS variables and scope /
:root{

--maincolor: black;
--secondarycolor: crimson;

}

/ Use CSS Variables /
body{

background: var(--maincolor);
color: white;

}

body p{

background: var(--secondarycolor);

}
这里我定义了两个包含:root 选择器内部颜色值的 CSS 变量。内部定义变量的选择器设置其范围，所有降序选择器（元素）都能够访问这些变量。在:root 选择器中定义 CSS 变量基本上使它们全局可用。此时，变量尚未应用于任何地方，处于休眠状态并准备好使用。需要注意的是 CSS 变量情况不像其他的 CSS 属性敏感，因此 –maincolor 和 –Maincolor 被认为是两个不同的变量。

要使用 CSS 变量，我们使用 var() 函数访问其值，方法是将变量名称传递给它。然后，我们选择所需的 CSS 属性来利用此变量的值。

您甚至可以将一个 CSS 变量的值全部或部分设置为另一个 CSS 变量：

1
2
3
4
5
6
7
8
9
10
11
/ Define CSS variables and scope /
:root{

--darkfont: brown;
--darkborder: 5px dashed var(--darkfont);

}

/ Use CSS Variables /
div.container{

color: var(--darkfont);
border: var(--darkborder);

}
CSS 变量的级联和继承
CSS 变量的行为与其他 CSS 属性非常相似，因为它们的值级联和继承，与使用 CSS 预处理器定义的属性不同。以下演示了使用 CSS 变量进行级联：

1
2
3
4
5
6
7
8
9
10
11
root{

--darkborder: 5px solid black;

}

body{

--darkborder: 1px solid darkred;

}

img{

border: var(--darkborder); /* img border will be 1px solid red */

}
在这里，我 –darkborder 在两个不同的选择器中两次定义了相同的 CSS 变量。由于级联规则，BODY 选择器内部的规则具有更高的特异性，并且在 IMG 元素中使用时会胜出。

CSS 变量也默认继承，因此在父元素上定义的 CSS 属性的值在这些元素中使用时会向下渗透到子元素。我们在下面的示例中看到了这一点，其中使用 UL 元素上的 CSS 变量定义的 UL 边界也自动应用于子 UL：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
:root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

margin-left: 30px;

}
输出截图：

Click screenshot to see live example

禁用继承
我们可以通过将 CSS 变量设置 initial 为所需选择器内的特殊值“”来阻止 CSS 变量在某个级别继承。这样做会将该属性重置为在该范围级别默认为“空”。例如，要通用地禁用 CSS 变量的继承，我们可以执行以下操作：

1
2
3
*{

--somevar: initial; /* disable inheritance for --somevar variable everywhere */

}
考虑下一个示例，该示例禁用 –myborder UL UL 级别的变量继承，因此在 UL 级别应用的变量不会向下传递到其后代:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

--myborder: initial; /* reset --myborder variable */
margin-left: 30px;

}
输出截图：

点击屏幕截图查看实时示例

重置 CSS 变量的值使您可以使用干净的平板，其中有多个 CSS 作者在页面上工作，并且可能存在重复的变量名称和非预期的继承。

使用 calc（）函数构建值
CSS 变量也可以与函数一起使用，因此数值可以是动态的，使 CSS 变量更接近 JavaScript 变量：calc()

1
2
3
4
5
6
7
8
9
10
11
:root{

--bottomgap: 30;

}

h1{

margin-bottom: calc(var(--bottomgap) * 1px)

}

h2{

margin-bottom: calc(var(--bottomgap) * .5px) /* half of H1 gap */

}

这里我将一个 CSS 变量设置为一个数字，然后使用该 calc()函数导出 H1 和 H2 元素的下边距，这样后者就是前一个元素的一半。在 calc()函数内部，为了导出实际单位（即：像素），我们对该单元执行乘法运算，例如乘以 –bottomgap1px。简单地将单元附加到变量的末尾将不起作用：

1
2
3
h1{

margin-bottom: calc(var(--bottomgap)px); /* doesn't work */

}
您也可以简单地设置 –bottomgap 为开始时的实际长度，例如 30px，并通过将 H2 除以 2 来计算 H2 元素的一半（除法运算的右侧必须始终为数字）。有关可接受语法的更多详细信息，请参阅该 函数。calc()

CSS 变量和 JavaScript
甚至可以使用 JavaScript 访问和设置 CSS 变量，通过仅更改 CSS 变量值来简化 CSS 样式的操作方式。以下是获取和设置 CSS 变量值的两种 JavaScript 方法，无论属性是直接在元素上定义还是继承：

1
2
getComputedStyle(element).getPropertyValue(‘–varname’) // get CSS variable value of an element, including any leading or trailing spaces
element.style.setProperty(‘–varname’, ‘newvalue’) // set CSS variable of an element to new value
要:root 在 JavaScript 中访问元素 / 选择器，请使用 document.documentElement。当 CSS 变量的值更改时，浏览器会自动重新绘制以反映更改。您甚至可以将一个 CSS 变量的值设置为另一个 CSS 变量，从而在 CSS 值之间创建相互依赖性，从而产生有趣的效果：

1
element.style.setProperty(‘–divheight’, ‘calc(var(–divwidth)/2)’) // set one CSS property to the value of another
以下示例通过仅使用 JavaScript 更新 CSS 变量来创建一个 CSS 条形时钟，该时钟告诉当前时间。每个 CSS 变量分别以当前的 24 小时，60 分钟或 60 秒的百分比形式输入当前的小时，分钟或秒。例如，下午 6 点将转换为 6 /24，或小时字段的 25%。我们使用这些值来确定每个条中要移动（变换）的背景伪元素的数量。结果如下：

JavaScript 与 CSS 之间的唯一交互是 CSS 变量本身 – CSS 变量为 JavaScript 开辟了一种新的，可以说是更清晰的方式来操纵 CSS。

内联设置 CSS 变量
CSS 变量也可以在元素上内联定义或设置，这样您就可以调整单个元素的 CSS 变量值。假设您已在样式表中设置了两个 CSS 变量，以定义 UL 内链接的静止和悬停背景颜色。但是，对于特定链接，您希望两种颜色与其他颜色不同。覆盖链接中两个 CSS 变量的默认值将是一种方法：

1
Home
Here is a working demo of this:

定义未定义 CSS 变量时的回退值
当使用带有该 var(–cssvariable)函数的 CSS 变量时，可以使用第二个参数填充该函数，该参数在未定义进程变量的情况下成为回退值。例如：

​1
2
background: var(–primarybg, white); / Normal value as fallback value /
font-size: var(–defaultsize, var(–fallbacksize, 36px)); / var() as fallback value /
如您所见，回退值本身可以是另一个 CSS var() 函数，在未定义变量的情况下，该函数又可以包含另一个回退值。

CSS 变量回退显然只能由支持 CSS 变量的浏览器获取。要为不支持该功能的浏览器提供后备值，您可以执行以下操作：

1
2
background: white; / background value for browsers that don’t support CSS variables /
background: var(–primarybg, white);
现在大家都开心了！

结论
像 SASS 这样的 CSS 预处理器在前端开发人员中得到了广泛的采用，尽管它们的编译本身固有地限制了它们的功能。与 CSS 预处理器不同，CSS 变量是常规，级联和继承，就像常规 CSS 属性一样，甚至可以使用 JavaScript 进行操作。但也许 CSS 变量的最大优点是浏览器本身支持它们，消除了即使是新手 Web 开发人员潜入的任何技术障碍。

CSS 变量简介
如今的浏览器开发似乎正好取代了流行的库和扩展目前为我们提供的功能。ECMAScript 6 几乎完全没有 jQuery，而十字线中的下一个似乎是 CSS 预处理器，如 SASS 和 LESS。现代版 Firefox 和 Chrome 支持 CSS 变量（也称为 CSS 自定义属性），允许您直接在 CSS 中定义变量，然后可以在样式表中的任何位置引用变量，甚至可以使用 JavaScript 进行操作。结果是一个类固醇的 CSS 预处理器，一个在浏览器中本机运行以启动。随着 IE Edge 希望尽快支持这一功能，这些令人兴奋的时刻确实是一个前端开发人员。让我们看看本教程中的 CSS 变量是什么。

基本语法
使用 CSS 变量是一个简单的两步过程：

使用语法在选择器内定义 CSS 变量 –myvariable。选择器根据正常的 CSS 继承和特异性规则确定变量的范围及其适用的位置。:root 例如，在选择器内定义的 CSS 变量可用于文档中的所有较低级别选择器（元素）。
使用语法引用 CSS 变量 var(–myvariable) 作为静态 CSS 属性值的替代。
现在让我们看一个基本的例子，把踏板放到金属上！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/ Define CSS variables and scope /
:root{

--maincolor: black;
--secondarycolor: crimson;

}

/ Use CSS Variables /
body{

background: var(--maincolor);
color: white;

}

body p{

background: var(--secondarycolor);

}
这里我定义了两个包含:root 选择器内部颜色值的 CSS 变量。内部定义变量的选择器设置其范围，所有降序选择器（元素）都能够访问这些变量。在:root 选择器中定义 CSS 变量基本上使它们全局可用。此时，变量尚未应用于任何地方，处于休眠状态并准备好使用。需要注意的是 CSS 变量情况不像其他的 CSS 属性敏感，因此 –maincolor 和 –Maincolor 被认为是两个不同的变量。

要使用 CSS 变量，我们使用 var() 函数访问其值，方法是将变量名称传递给它。然后，我们选择所需的 CSS 属性来利用此变量的值。

您甚至可以将一个 CSS 变量的值全部或部分设置为另一个 CSS 变量：

1
2
3
4
5
6
7
8
9
10
11
/ Define CSS variables and scope /
:root{

--darkfont: brown;
--darkborder: 5px dashed var(--darkfont);

}

/ Use CSS Variables /
div.container{

color: var(--darkfont);
border: var(--darkborder);

}
CSS 变量的级联和继承
CSS 变量的行为与其他 CSS 属性非常相似，因为它们的值级联和继承，与使用 CSS 预处理器定义的属性不同。以下演示了使用 CSS 变量进行级联：

1
2
3
4
5
6
7
8
9
10
11
root{

--darkborder: 5px solid black;

}

body{

--darkborder: 1px solid darkred;

}

img{

border: var(--darkborder); /* img border will be 1px solid red */

}
在这里，我 –darkborder 在两个不同的选择器中两次定义了相同的 CSS 变量。由于级联规则，BODY 选择器内部的规则具有更高的特异性，并且在 IMG 元素中使用时会胜出。

CSS 变量也默认继承，因此在父元素上定义的 CSS 属性的值在这些元素中使用时会向下渗透到子元素。我们在下面的示例中看到了这一点，其中使用 UL 元素上的 CSS 变量定义的 UL 边界也自动应用于子 UL：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
:root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

margin-left: 30px;

}
输出截图：

Click screenshot to see live example

禁用继承
我们可以通过将 CSS 变量设置 initial 为所需选择器内的特殊值“”来阻止 CSS 变量在某个级别继承。这样做会将该属性重置为在该范围级别默认为“空”。例如，要通用地禁用 CSS 变量的继承，我们可以执行以下操作：

1
2
3
*{

--somevar: initial; /* disable inheritance for --somevar variable everywhere */

}
考虑下一个示例，该示例禁用 –myborder UL UL 级别的变量继承，因此在 UL 级别应用的变量不会向下传递到其后代:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

--myborder: initial; /* reset --myborder variable */
margin-left: 30px;

}
输出截图：

点击屏幕截图查看实时示例

重置 CSS 变量的值使您可以使用干净的平板，其中有多个 CSS 作者在页面上工作，并且可能存在重复的变量名称和非预期的继承。

使用 calc（）函数构建值
CSS 变量也可以与函数一起使用，因此数值可以是动态的，使 CSS 变量更接近 JavaScript 变量：calc()

1
2
3
4
5
6
7
8
9
10
11
:root{

--bottomgap: 30;

}

h1{

margin-bottom: calc(var(--bottomgap) * 1px)

}

h2{

margin-bottom: calc(var(--bottomgap) * .5px) /* half of H1 gap */

}

这里我将一个 CSS 变量设置为一个数字，然后使用该 calc()函数导出 H1 和 H2 元素的下边距，这样后者就是前一个元素的一半。在 calc()函数内部，为了导出实际单位（即：像素），我们对该单元执行乘法运算，例如乘以 –bottomgap1px。简单地将单元附加到变量的末尾将不起作用：

1
2
3
h1{

margin-bottom: calc(var(--bottomgap)px); /* doesn't work */

}
您也可以简单地设置 –bottomgap 为开始时的实际长度，例如 30px，并通过将 H2 除以 2 来计算 H2 元素的一半（除法运算的右侧必须始终为数字）。有关可接受语法的更多详细信息，请参阅该 函数。calc()

CSS 变量和 JavaScript
甚至可以使用 JavaScript 访问和设置 CSS 变量，通过仅更改 CSS 变量值来简化 CSS 样式的操作方式。以下是获取和设置 CSS 变量值的两种 JavaScript 方法，无论属性是直接在元素上定义还是继承：

1
2
getComputedStyle(element).getPropertyValue(‘–varname’) // get CSS variable value of an element, including any leading or trailing spaces
element.style.setProperty(‘–varname’, ‘newvalue’) // set CSS variable of an element to new value
要:root 在 JavaScript 中访问元素 / 选择器，请使用 document.documentElement。当 CSS 变量的值更改时，浏览器会自动重新绘制以反映更改。您甚至可以将一个 CSS 变量的值设置为另一个 CSS 变量，从而在 CSS 值之间创建相互依赖性，从而产生有趣的效果：

1
element.style.setProperty(‘–divheight’, ‘calc(var(–divwidth)/2)’) // set one CSS property to the value of another
以下示例通过仅使用 JavaScript 更新 CSS 变量来创建一个 CSS 条形时钟，该时钟告诉当前时间。每个 CSS 变量分别以当前的 24 小时，60 分钟或 60 秒的百分比形式输入当前的小时，分钟或秒。例如，下午 6 点将转换为 6 /24，或小时字段的 25%。我们使用这些值来确定每个条中要移动（变换）的背景伪元素的数量。结果如下：

JavaScript 与 CSS 之间的唯一交互是 CSS 变量本身 – CSS 变量为 JavaScript 开辟了一种新的，可以说是更清晰的方式来操纵 CSS。

内联设置 CSS 变量
CSS 变量也可以在元素上内联定义或设置，这样您就可以调整单个元素的 CSS 变量值。假设您已在样式表中设置了两个 CSS 变量，以定义 UL 内链接的静止和悬停背景颜色。但是，对于特定链接，您希望两种颜色与其他颜色不同。覆盖链接中两个 CSS 变量的默认值将是一种方法：

1
Home
Here is a working demo of this:

定义未定义 CSS 变量时的回退值
当使用带有该 var(–cssvariable)函数的 CSS 变量时，可以使用第二个参数填充该函数，该参数在未定义进程变量的情况下成为回退值。例如：

​1
2
background: var(–primarybg, white); / Normal value as fallback value /
font-size: var(–defaultsize, var(–fallbacksize, 36px)); / var() as fallback value /
如您所见，回退值本身可以是另一个 CSS var() 函数，在未定义变量的情况下，该函数又可以包含另一个回退值。

CSS 变量回退显然只能由支持 CSS 变量的浏览器获取。要为不支持该功能的浏览器提供后备值，您可以执行以下操作：

1
2
background: white; / background value for browsers that don’t support CSS variables /
background: var(–primarybg, white);
现在大家都开心了！

结论
像 SASS 这样的 CSS 预处理器在前端开发人员中得到了广泛的采用，尽管它们的编译本身固有地限制了它们的功能。与 CSS 预处理器不同，CSS 变量是常规，级联和继承，就像常规 CSS 属性一样，甚至可以使用 JavaScript 进行操作。但也许 CSS 变量的最大优点是浏览器本身支持它们，消除了即使是新手 Web 开发人员潜入的任何技术障碍。

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

--myborder: initial; /* reset --myborder variable */
margin-left: 30px;

}
输出截图：

点击屏幕截图查看实时示例

重置 CSS 变量的值使您可以使用干净的平板，其中有多个 CSS 作者在页面上工作，并且可能存在重复的变量名称和非预期的继承。

使用 calc（）函数构建值
CSS 变量也可以与函数一起使用，因此数值可以是动态的，使 CSS 变量更接近 JavaScript 变量：calc()

1
2
3
4
5
6
7
8
9
10
11
:root{

--bottomgap: 30;

}

h1{

margin-bottom: calc(var(--bottomgap) * 1px)

}

h2{

margin-bottom: calc(var(--bottomgap) * .5px) /* half of H1 gap */

}

这里我将一个 CSS 变量设置为一个数字，然后使用该 calc()函数导出 H1 和 H2 元素的下边距，这样后者就是前一个元素的一半。在 calc()函数内部，为了导出实际单位（即：像素），我们对该单元执行乘法运算，例如乘以 –bottomgap1px。简单地将单元附加到变量的末尾将不起作用：

1
2
3
h1{

margin-bottom: calc(var(--bottomgap)px); /* doesn't work */

}
您也可以简单地设置 –bottomgap 为开始时的实际长度，例如 30px，并通过将 H2 除以 2 来计算 H2 元素的一半（除法运算的右侧必须始终为数字）。有关可接受语法的更多详细信息，请参阅该 函数。calc()

CSS 变量和 JavaScript
甚至可以使用 JavaScript 访问和设置 CSS 变量，通过仅更改 CSS 变量值来简化 CSS 样式的操作方式。以下是获取和设置 CSS 变量值的两种 JavaScript 方法，无论属性是直接在元素上定义还是继承：

1
2
getComputedStyle(element).getPropertyValue(‘–varname’) // get CSS variable value of an element, including any leading or trailing spaces
element.style.setProperty(‘–varname’, ‘newvalue’) // set CSS variable of an element to new value
要:root 在 JavaScript 中访问元素 / 选择器，请使用 document.documentElement。当 CSS 变量的值更改时，浏览器会自动重新绘制以反映更改。您甚至可以将一个 CSS 变量的值设置为另一个 CSS 变量，从而在 CSS 值之间创建相互依赖性，从而产生有趣的效果：

1
element.style.setProperty(‘–divheight’, ‘calc(var(–divwidth)/2)’) // set one CSS property to the value of another
以下示例通过仅使用 JavaScript 更新 CSS 变量来创建一个 CSS 条形时钟，该时钟告诉当前时间。每个 CSS 变量分别以当前的 24 小时，60 分钟或 60 秒的百分比形式输入当前的小时，分钟或秒。例如，下午 6 点将转换为 6 /24，或小时字段的 25%。我们使用这些值来确定每个条中要移动（变换）的背景伪元素的数量。结果如下：

JavaScript 与 CSS 之间的唯一交互是 CSS 变量本身 – CSS 变量为 JavaScript 开辟了一种新的，可以说是更清晰的方式来操纵 CSS。

内联设置 CSS 变量
CSS 变量也可以在元素上内联定义或设置，这样您就可以调整单个元素的 CSS 变量值。假设您已在样式表中设置了两个 CSS 变量，以定义 UL 内链接的静止和悬停背景颜色。但是，对于特定链接，您希望两种颜色与其他颜色不同。覆盖链接中两个 CSS 变量的默认值将是一种方法：

1
Home
Here is a working demo of this:

定义未定义 CSS 变量时的回退值
当使用带有该 var(–cssvariable)函数的 CSS 变量时，可以使用第二个参数填充该函数，该参数在未定义进程变量的情况下成为回退值。例如：

​1
2
background: var(–primarybg, white); / Normal value as fallback value /
font-size: var(–defaultsize, var(–fallbacksize, 36px)); / var() as fallback value /
如您所见，回退值本身可以是另一个 CSS var() 函数，在未定义变量的情况下，该函数又可以包含另一个回退值。

CSS 变量回退显然只能由支持 CSS 变量的浏览器获取。要为不支持该功能的浏览器提供后备值，您可以执行以下操作：

1
2
background: white; / background value for browsers that don’t support CSS variables /
background: var(–primarybg, white);
现在大家都开心了！

结论
像 SASS 这样的 CSS 预处理器在前端开发人员中得到了广泛的采用，尽管它们的编译本身固有地限制了它们的功能。与 CSS 预处理器不同，CSS 变量是常规，级联和继承，就像常规 CSS 属性一样，甚至可以使用 JavaScript 进行操作。但也许 CSS 变量的最大优点是浏览器本身支持它们，消除了即使是新手 Web 开发人员潜入的任何技术障碍。