CSS Variables 变量（自定义属性）

背景

许多的网页设计为了避免颜色过多过杂乱影响观感，都会有自己独特的主题样式，通常会统一整个网页的色调，同一种元素上（比如按钮，LOGO，文字等）使用大量邻近的颜色或者直接使用一种颜色。复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换。在设计时反复写十六进制的RGB值导致效率会极其低下，如果主题需要变更时，无论是直接在 CSS 修改大量的属性还是用 JavaScript 操作大量DOM节点的样式都是很麻烦的，于是 CSS 也引入了变量的概念。

使用

CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties）。

声明

自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用,由自定义属性标记设定值（比如： --main-color: black;）。

变量名前面要加两根连词线–，变量名大小写敏感。

--theme-color: #bfbfbf;
--Theme-Color: #bfbfbf;
// 这是两个不同的CSS变量

读取

var() 函数用来读取CSS变量，括号内为自定义属性名。

color: var(--theme-color);

好处

1. 方便更改大量相同属性值，提高效率。
2. 自定义的属性名，语义化的标识。

备注：

像自定义属性.这些 fallback 语法允许使用逗号。比如 var(--foo, red, blue) 定义了一个

的备用值——从第一个逗号到最后的全部内容，都会被作为备用值的一部分。备注： 像[自定义属性。这些 fallback 语法允许使用逗号。比如 var(--foo, red, blue) 定义了一个 red, blue 的备用值——从第一个逗号到最后的全部内容，都会被作为备用值的一部分。性和值

传统的 CSS 概念里，有效性和属性是绑定的，这对自定义属性来说并不适用。当自定义属性值被解析，浏览器不知道它们什么时候会被使用，所以必须认为这些值都是有效的。

不幸的是，即便这些值是有效的，但当通过 var() 函数调用时，它在特定上下文环境下也可能不会奏效。属性和自定义变量会导致无效的 CSS 语句，这引入了一个新的概念：计算时有效性。

基本用法

声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。和其他属性一样，自定义属性也是写在规则集之内的.注意到在 CSS 代码中的重复：背景色被多处设置。对于一些 CSS 声明，是可以在级联关系更高的位置设置，通过 CSS 继承自然地解决这个重复的问题。但在一般项目中，是不可能通过这样的方式去解决。通过在伪类上设置自定义属性，然后在整个文档需要的地方使用，可以减少这样的重复性：

--day-bgcolor: rgb(224, 224, 224);
--night-bgcolor: rgb(48, 48, 48);

background-color: var(--day-bgcolor);

CSS变量不仅可以单独使用，可以结合calc()计算函数，比如下面的属性值是合法的。

--top-height: 16px;

height: calc(var(--top-height) + 50px);

自定义属性受级联的约束，并从其父级继承其值。

注意，规则集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了.注意，这些是自定义属性，并不是你在其他编程语言中遇到的实际的变量。这些值仅当需要的时候才会计算，而并不会按其他规则进行保存。比如，你不能为元素设置一个属性，然后让它从兄弟或旁支子孙规则上获取值。属性仅用于匹配当前选择器及其子孙，这和通常的 CSS 是一样的。

变量的使用需要在合适的上下文环境中。 变量定义所在的区域同级的标签中无法使用（兄弟），只允许在继承了自定义属性的子样式中 var() 引用。 比如在下面的情况无法使用变量：

<div id='grandfather'>purple
    <div id='father'>purple</div>
    <div id='uncle'>purple</div>
</div>

#father {
    --color: purple;
}
#uncle {
    color: var(--color)
}
#grandfather {
    color: var(--color)
}

可以看到 #grandfather 是 #father 节点所在的上一级，而 #uncle 是 #father 的同级，两个都无法继承 #father 的自定义属性，也就无法使用。

<div id='father'>purple
    <div id='son'>purple
        <div id='grandson'>purple</div>
    </div>
</div>

#father {
    --color: purple;
}
#son {
    color: var(--color)
}
#grandson {
    color: var(--color)
}

因为 #son 和 #grandson 都是在 #father 的子元素，所以二者都可以继承和使用变量。