css3中var函数

1、css3中的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 lang='scss'>
:root {
  --theme-bg: rgb(28, 172, 198);
}
</style>

在每个vue组件内都可通过var()直接使用这个变量

<style lang='scss' 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 必需。一个字符串，表示创建或修改的属性。

1. value 可选，新的属性值。
2. priority 可选。字符串，规定是否需要设置属性的优先级 important。
   可以是下面三个值:
   “important”
   undefined
   “”

点击按钮时，设置–theme-bg的值为blue，那么就能改变.box中的样式

    change() {
      document.documentElement.style.setProperty("--theme-bg", "blue");
    }

document.documentElement获取到的是网页的根元素，即html根标签，即:root选择器对应的元素。

总结

总结：

1. 在:root中定义以–开头的变量，如–theme-bg
2. 在后代元素的css中，就能使用–theme-bg变量作为css的值（注意要使用var()将变量包起来）
3. 通过.style.setProperty修改这个–theme-bg的值，修改后css中的值也就改变了。

注：

1. 当尺寸使用var作为变量时，就不能再使用flexible插件转为rem尺寸了。
2. 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都可以生效。

https://blog.csdn.net/longtengg1/article/details/124025772