前言
less或sass很早就出现变量的概念，但是本质上还是要编译成css，缺少灵活性。css3变量就很容易担任他们的职责，而且不需要安装loader编译。
变量的使用
使用
--来定义css，并且在:后赋予变量初始值-
在使用变量的地方只需要使用
var()包裹变量即可使用:root { --red: red; } view { color: var(--red); }
变量的命名
-
区分大小写
:root { --red: red; --Red:yellow; } -
不能使用非法字符（除开
_``-）:root { --re#d: red; /* 无效 */ --red_d:red; /* 可以使用 */ }
变量读取（var()函数）
-
var()能够传入两个参数，第一个为要使用的变量；第二个参数为默认值，如果参数一变量不存在，那么就会使用参数二这个默认值。:root { --red: red; } view { color: var(--red, yellow); /* 字体颜色为红色，如果(--red)变量不存在，那么就使用参数二（yellow） */ }
-
var()函数用在变量的声明:root { --red: red; --fRed:var(--red); /* (--red)和(--fRed)存取的值是一样 */ } -
var()的值只能当作css属性的值，不能做属性名称:root { --red: color; } view { var(--red): red; /* 这样是无效的 */ }
变量的值类型
-
值为字符串
:root { --red: "red"; } view { color: var(--red); /* 无效的，因为（--red）只是字符串，不是css的关键字属性 */ } view::after{ cotent:var(--red); /* 这样是可以的，因为content的属性值就是一个字符串 */ } -
值为数字
:root { --size: 20; } view { font-size: var(--size)px; /* 无效，不能和单位直接拼接 */ font-size: calc(var(--size)*1px);/* 正确 */ } -
值为css合法属性值(都可以正常使用)
:root { --size: 20px; --color:red; --hidden: hidden; }
变量的作用域
:root代表全局作用域，全局都有效-
使用css变量， 会采用优先级最高的规则 ，和css的权重规则一样
:root { --color: red; } view { --color: yellow; } view.cs { color: var(--color); }
