css自定义属性（css变量）

背景

复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。

举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换，效率不高且容易出错。

自定义属性允许将值存储在一个地方，然后在多个其他地方引用。另一个好处是语义标识符。例如，--main-text-color比 更容易理解#00ff00，特别是如果在其他上下文中也使用相同的颜色。

基本用法

1、css中声明变量

声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的CSS值。和其他属性一样，自定义属性也是写在规则集之内的，如下：

常见的最佳实践是在:root伪类上定义自定义属性，以便可以在 HTML 文档中全局应用它：

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

2、使用

您可以通过在var()函数中指定自定义属性名称来使用自定义属性值，而不是常规属性值：

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

请注意，提供给规则集的选择器定义了可以使用自定义属性的范围，您可能限制自定义属性的范围

3、js操作css变量

在 JS 代码中，我们可能需要读取 CSS 变量的值，其方法如下：

const root = document.querySelector(":root");
// 设置 CSS 变量
root.style.setProperty("--main-bg-color", "red");
// 读取 CSS 变量
const computedStyle = getComputedStyle(root);
const mainBgColor = computedStyle.getPropertyValue("--main-bg-color");
console.log(mainBgColor);
// 删除 CSS 变量
root.style.removeProperty("--main-bg-color");

总结：灵活使用 CSS 变量，不仅可以提高生产力，也能够提高代码的可阅读性和维护性。

参考博客：前端 CSS 变量简介及基本使用方法 - 掘金