Using CSS variables

这是一种实验技术

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

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);

浏览器兼容性