基础语法

CSS变量的语法由两部分组成，一部分是CSS变量的声明，另一部分是CSS变量的使用。

:root {
    --primary-color: deepskyblue;
}
button {
    background-color: var(--primary-color);
}

css变量声明的语法：需要注意css变量的命名不支持$、[、]、^、(、)、%、"等特殊字符，要使用这些特殊字符，需要使用反斜杠转义。

css变量的使用var()函数的完整语法为

<font style="background-color:rgb(246, 247, 249);">var( <custom-property-name> [, <declaration-value> ]? )</font>

其中，第一个参数为变量名，第二个参数为缺省值，也就是当前面的自定义属性不存在时的值。

💡需要注意var函数的一个特点，当自定义属性

css变量的作用域

CSS变量的作用域具有继承的特性，遵循HTML文档树，只能由元素自身或者后代元素使用。

比如下边这段代码，自定义属性--color就不会生效，因为--color是在.box元素上声明的，在body元素上不会生效。

body {
    background-color: var(--color);
}
.box {
    --color: deepskyblue;
}

常见作用