css var() function

定义：

var() 函数可以用来插入用户自定义的属性

浏览器支持

在css 中变量应该在一个css 选择器中声明它的使用范围(scope)。 比如全局范围要么使用:root 选择器，要么使用body选择器定义。
变量的名称一定是 — 开头并且大小写敏感的。

语法：

var(custom-name, vaule)

示例：

:root {
    --main-bg-color: coral; 
}
#div1 {
    background-color: var(--main-bg-color); 
}
#div2 {
    background-color: var(--main-bg-color);
}

还可以定义多个变量：

: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);
}