css3 var函数使用

css3的var函数，和sass、less等预编译差不多，都可以定义变量并且进行对应的使用：

1、语法：

var(name, value)

2、定义：

--background-color: red

3、使用：

body {
background-color:  var(--background-color)
}

注：名字可随意设置但必须以双破折号开头。

4、私域写法

#div {
    --size1:20px;
    --size2:20;
    font-size:var(--size1); // 结果：font-size:20px;  ✓
    font-size:var(--size2)px; // 结果：font-size:20 px; ×  会出现读取错误
    font-size:var(--size2)*1px; // 结果：font-size:20px; ✓
}

注：私域写法，和js的let、const用法一致，设置和调用都在一个{}中，内部设置的自定义样式不能被外部调用。

5、全局写法

通过伪类root字段定义自定义属性。

/*定义*/
:root{--size1:20px;}
/*使用*/
#div1{
font-size:var(--size1); // 结果：font-size:20px;  ✓
}
#div2{
font-size:var(--size1); // 结果：font-size:20px;  ✓
}

注：在:root中定义的变量，可以在同一个css中任何地方调用