var()函数
CSS中的变量应该在定义其范围的CSS选择器中声明。对于全局范围,您可以使用:root或body选择器。变量名必须以两个破折号( - )开头,并且区分大小写!该var()函数的语法如下:
var(custom-name, value)
- custom-name - 必需的。自定义属性的名称(必须以两个破折号开头)
- value - 可选的。回退值(如果自定义属性无效,则使用)
以下示例首先定义名为“--main-bg-color”的全局自定义属性,然后使用var()函数稍后在样式表中插入自定义属性的值:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
尝试一下
以下示例使用var()函数插入多个自定义属性值:
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
尝试一下