1、css3中的var()函数
var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
var函数有两个参数
var(custom-property-name, value)
custom-property-name 必需。自定义属性的名称（即变量），必需以 – 开头。
value 可选。备用值，在属性不存在的时候使用。
例：
:root {
--theme-bg: rgb(28, 172, 198);
}
.box{
color: var(--theme-bg);
}–theme-bg即使用的变量，将变量设置到根元素上，那么其下面的元素在css中就能使用这个变量。
:root选择器用匹配文档的根元素。在HTML中根元素始终是HTML元素。
在vue中使用时，可以将:root写在app.vue根组件内，并且不使用scoped，使之作为全局的。
<style>
:root {
--theme-bg: rgb(28, 172, 198);
}
</style>在每个vue组件内都可通过var()直接使用这个变量
<style scoped >
.box{
color: var(--theme-bg);
}
</style>2、通过js修改变量
通过 ele.style.setProperty(key, value) 动态修改 ele元素上的 CSS 变量，使得页面上的其他部分可以应用最新的 CSS 变量对应的样式.
setProperty方法
setProperty() 方法用于设置一个新的 CSS 属性，同时也可以修改 CSS 声明块中已存在的属性。
语法
object.setProperty(propertyname, value, priority)
propertyname 必需。一个字符串，表示创建或修改的属性。
value 可选，新的属性值。
priority 可选。字符串，规定是否需要设置属性的优先级 important
可以是下面三个值:
“important”
undefined
“”
样式如第一部分所述
点击按钮时，设置–theme-bg的值为blue，那么就能改变.box中的样式
change() {
document.documentElement.style.setProperty("--theme-bg", "blue");
}document.documentElement获取到的是网页的根元素，即html根标签，即:root选择器对应的元素。
总结：
在:root中定义以–开头的变量，如–theme-bg
在后代元素的css中，就能使用–theme-bg变量作为css的值（注意要使用var()将变量包起来）
通过.style.setProperty修改这个–theme-bg的值，修改后css中的值也就改变了。
注：
当尺寸使用var作为变量时，就不能再使用flexible插件转为rem尺寸了。
var中使用其它css函数时也可以生效
background:linear-gradient(-180deg, var(--nav-bg-color) 0%, var(--theme-color) 100%);
或者
:root {
--nav-bg-color:linear-gradient(-180deg, #F98C46 0%, #F8564A 100%);
}
.box{
background: var(--nav-bg-color);
}以上两种方式在var中使用linear-gradient都可以生效。