CSS 变量

通过var()函数可以将变量的值插入作为正常的CSS属性。

浏览器兼容性

下表是每种浏览器支持var()函数的最低版本。

函数
var()	49.0	15.0	31.0	9.1	36.0

var() 函数

CSS中变量必须在CSS选择器内声明其作用域，如果是全局使用，请使用body选择器或者:root选择器。

语法：

var(变量名, 默认值)

• 变量名 - CSS变量名必须用两个横线--作为开头，以示敏感。（必要参数）
• 默认值 - 如果变量值返回失败，则使用默认值。（非必要）

案例1：

body {
    --main-bg-color: Tomato;    
}

#div1 {
    background-color: var(--main-bg-color);
    padding: 5px;    
}

#div2 {
    background-color: var(--main-bg-color);
    padding: 5px;
}

#div3 {
    background-color: var(--main-bg-color);
    padding: 5px;
}

运行一下

案例2：

:root {
    --main-bg-color: Tomato;
    --main-txt-color: White;    
    --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);
}

/* 活学活用，利用calc函数来搞事 */
#div3 {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
    padding: calc(var(--main-padding) * 3); /* 15px * 3 = 45px */
}

运行一下