Using CSS variables

使用CSS变量

这是一种实验技术

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。还要注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

CSS变量是由CSS作者定义的实体，它包含要在文档中重复使用的特定值。它们使用自定义属性符号（例如--main-color: black;）设置，并使用var()（https://developer.mozilla.org/en-US/docs/Web/CSS/var（））函数（例如）访问。color: var(--main-color

复杂的网站有大量的CSS，通常有很多重复的值。例如，可能在数百个不同的地方使用相同的颜色，如果需要更改颜色，则需要全局搜索和替换。CSS变量允许将值存储在一个地方，然后在多个其他地方引用。另一个好处是语义标识符。例如--main-text-color比较容易理解#00ff00，特别是如果在另一个上下文中也使用相同的颜色。

CSS变量受到叠层影响，并从父级继承其值。

基本用法

声明一个变量：

element {
  --main-bg-color: brown;
}

使用变量：

element {
  background-color: var(--main-bg-color
}

注意：自定义属性前缀var-在先前的规范中，但后来更改为--。Firefox 31及更高版本遵循新规范。（错误985838）

使用CSS变量的第一步

让我们从使用相同颜色为不同类的元素着色的简单CSS开始：

.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

我们将它应用于此HTML：

<div>
  <div class="one">1:</div>
  <div class="two">2: Text <span class="five">5 - more text</span></div>
  <input class="three">
  <textarea class="four">4: Lorem Ipsum</textarea>
</div>

这导致我们这样做：

注意CSS中的重复。背景色设置brown在几个地方。对于一些CSS声明，可以在级联中声明这个更高的值，并让CSS继承自然地解决这个问题。对于不平凡的项目，这并不总是可能的。通过在：root伪类上声明变量，CSS作者可以通过使用该变量来暂停某些重复实例。

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color
}

<div>
    <div class="one"></div>
    <div class="two">Text <span class="five">- more text</span></div>
    <input class="three">
    <textarea class="four">Lorem Ipsum</textarea>
</div>

这将导致与前面的示例相同的结果，但允许对所需属性进行规范声明。

CSS变量的继承

自定义属性确实继承。这意味着，如果在给定元素上没有为自定义属性设置值，则使用其父元素的值：

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>

使用以下CSS：

.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

在这种情况下，var(--test)是：

为class="two"要素：10px

为class="three"要素：2em

对于class="four"元素：（10px从其父项继承）

为class="one"要素：无效值，它是任何自定义属性的默认值。

请记住，这些是自定义属性，而不是实际的CSS变量。该值是在需要的地方计算的，而不是存储用于其他规则。例如，你不能为一个元素设置一个属性，并期望在一个兄弟的后裔的规则中检索它。该属性只是为匹配的选择器及其后代设置，就像任何普通的CSS一样。

自定义属性回退值

使用var（）可以在给定变量尚未定义时定义多个后备值，这对使用自定义元素和Shadow DOM时非常有用。

函数的第一个参数是要替换的自定义属性的名称。函数的第二个参数（如果提供）是一个后备值，当引用的定制属性无效时，该后退值用作替换值。例如：

.two {
  color: var(--my-var, red /* Red if --my-var is not defined */
}

.three {
  background-color: var(--my-var, var(--my-background, pink) /* pink if my-var and --my-background are not defined */
}

.three {
  background-color: var(--my-var, --my-background, pink /* Invalid: "--my-background, pink" */
}

回退的语法（如自定义属性的语法）允许使用逗号。例如，var（ - foo，red，blue）定义了红色，蓝色的回退; 也就是说，第一个逗号和函数结尾之间的任何内容都被认为是后备值。

这种方法也被认为会导致性能问题。它使得浏览器渲染页面的速度比正常缓慢，因为它需要更多的时间来解析变量。

有效性与值

关于每个属性的经典CSS有效性概念对于自定义属性并不是很有用。当自定义属性的值被解析时，浏览器不知道它们将在哪里使用，因此必须考虑几乎所有的值都是有效的。

不幸的是，这些有效的值可以通过var()函数表示法在可能没有意义的上下文中使用。属性和自定义变量可能导致无效的CSS语句，从而导致在计算时间新的有效概念。

Javascript中的值

要在Javascript中使用自定义属性的值，它就像标准属性一样。

// get variable from inline style
element.style.getPropertyValue("--my-var"

// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var"

// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)-webkit 33.0 No support 34.02 49.0	(Yes)	29 (29)3 31 (31)	No support	36.0	9.1

Feature	Android	Android Webview	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	No support	49.0	(Yes)	29 (29)	?	?	9.1	49.0