声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的CSS值。

css">/*:root 选择器匹配文档根元素。*/
/*在 HTML 中，根元素始终是 html 元素。*/
/*也就是说：root 表示的是根元素*///声明
:root {--main-bg-color: brown;
}//使用
element {background-color: var(--main-bg-color);
}//场景二：
const colorStyle = computed(() => ({'--dynamic-color': selectedColor.value,
}));::v-deep(.el-textarea__inner) {color: var(--dynamic-color);
}

用 var() 函数可以定义多个备用值，当给定值未定义时将会用备用值替换。

css">/*如果提供了第二个参数，则表示备用值，当自定义属性值无效时生效。
第二个参数可以嵌套，但是不能继续平铺展开下去了，例如：*/
.two {color: var(--my-var, red); 
}.three {background-color: var(--my-var, var(--my-background, pink)); 
}.three {background-color: var(--my-var, --my-background, pink); 
}

注意：

1. 自定义属性名是大小写敏感的，--my-color 和 --My-color 会被认为是两个不同的自定义属性。同时不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文
2. 根据CSS的空格尾随特性font-size:var(--size)px等同于font-size:20 px，注意，20后面有个空格，所以，这里的font-size使用的是元素默认的大小。

css">//结果为默认大小
body {--size: 20;   font-size: var(--size)px;
}//正确方法（1）
//结果为20px
body {--size: 20px;   font-size: var(--size);
}//正确方法（2）
//结果为20px
body {--size: 20;   font-size: calc(var(--size) * 1px);
}