CSS 自定义属性（变量）

自定义属性（有时候也被称作CSS 变量或者级联变量）包含的值可以在整个文档中重复使用。由 var() 函数来获取值（比如： color: var(–main-color);）

参考文献：使用 CSS 自定义属性（变量） - CSS：层叠样式表 | MDN
该文归纳总结的很棒，我这里仅仅做简要笔记。

用法

以两个减号（--）开始，属性名大小写敏感，属性值则可以是任何有效的 CSS 值。

1
2
3

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

通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了：

1
2
3

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

然而这条规则不是绝对的，如果有理由去限制你的自定义属性，那么就应该限制。

作用域与继承

在了解这个特性之前，我一直喜欢称这个是 css 变量。但是了解之后，我觉得它被称为“自定义属性”更贴切一点。

作用域是 CSS 自定义属性的很重要的一个概念。不同选择器内定义的属性，仅仅生效在它自己以及子元素。

而如果你在其子元素内修改属性的值，该修改只会在该子元素生效，并不会影响父元素或者其他子元素。

这点就和传统“变量”的意义很不一样了。对于变量而言，你在一处修改，程序的其他位置也发生了改动。MDN 说得很好：

MDN

自定义属性，并不是你在其他编程语言中遇到的实际的变量。这些值仅当需要的时候才会计算，而并不会按其他规则进行保存。比如，你不能为元素设置一个属性，然后让它从兄弟或旁支子孙规则上获取值。属性仅用于匹配当前选择器及其子孙，这和通常的 CSS 是一样的。

其给出的例子也很好：

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

.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

在这个情况下， var(--test) 的结果分别是：

对于元素 class="two" ：10px
对于元素 class="three" ：2em
对于元素 class="four" ：10px （继承自父属性）
对于元素 class="one" ：非法值，会变成自定义属性的默认值

备用值

该机制用于处理给定值未定义或是无效值的情况。备用值并不是用于实现浏览器兼容性的，也做不到这件事。

MDN

用 var() 函数可以定义多个备用值（fallback value），当给定值未定义时将会用备用值替换。这对于 Custom Element 和 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" */
}

无效变量的处理

这里需要知道一个知识：

Note

当 CSS 属性 - 值对中存在语法错误，该行则会被忽略。
然而如果自定义属性的值无效，它并不会被忽略，从而会导致该值被覆盖为默认值。

MDN 给出的例子：

:root {
  --text-color: 16px;
}
p {
  color: blue;
}
p {
  color: var(--text-color); /* 这种情况下是黑色，但如果直接赋值 color: 16px; 则会变成蓝色 */
}

JS 中使用

在 JavaScript 中获取或者修改 CSS 变量和操作普通 CSS 属性是一样的：

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + '%');