示例：
:root {
–bg-color: #3a3a3a;
}
body {
background-color: var(–bg-color);
}
var()
var()函数用于插入CSS变量的值。
:root
:root是一个伪类，表示文档根元素，非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用
传统方式：
以下示例显示了在样式表中定义某些颜色的传统方式(通过为每个特定元素定义要使用的颜色)：
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color: #1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px solid #1e90ff;
padding: 5px;
}
var()函数的语法
:root {
–blue: #1e90ff;
–white: #ffffff;
}
body { background-color: var(–blue); }
h2 { border-bottom: 2px solid var(–blue); }
.container {
color: var(–blue);
background-color: var(–white);
padding: 15px;
}
button {
background-color: var(–white);
color: var(–blue);
border: 1px solid var(–blue);
padding: 5px;
}
var()函数的语法
该var()函数用于插入CSS变量的值。
该var()函数的语法如下：
var(name, value)
注意：变量名必须以两个破折号(-)开头，并且区分大小写！
var()如何工作
首先：CSS变量可以具有全局范围或局部范围。
全局变量可以在整个文档中访问/使用，而局部变量只能在声明它的选择器内部使用。
要创建具有全局作用域的变量，请在:root 选择器中声明它。在:root选择文档的根元素相匹配。
要创建具有局部作用域的变量，请在将要使用它的选择器中声明它。
下面的示例与上面的示例相同，但是在这里我们使用该var()函数。
首先，我们声明两个全局变量(–blue和–white)。然后，我们使用该 var()函数稍后在样式表中插入变量的值
使用var()的优点是：
使代码更易于阅读(更易于理解)
使更改颜色值更加容易
要将蓝色和白色更改为较柔和的蓝色和白色，您只需要更改两个变量值
javascript获取自定义属性
var rootElement = document.documentElement;
var styles = getComputedStyle(rootElement);
var mainColor = styles.getPropertyValue(‘–color-text’);
console.log(String(mainColor).trim())
javascript设置自定义属性
var rootElement = document.documentElement;
rootElement.style.setProperty(‘–color-text’,’#ccc’);