CSS变量使用解析

body {  --head_color: #000;  --head_bar: #F7EFD2;}

上面代码中，body选择器里面声明了两个变量。它与正常的属性定义上没有什么不同，只是没有默认含义，所以其又叫做CSS自定义属性

这里需要注意的是，其变量名对大小写是敏感的。

变量的引用

变量的引用也很简单，它为我们提供了一个方法专门进行引用，var()函数用于读取变量。

.head {  color: var(--head_color);}

这样就引用了，另外，如果你担心变量没有定义，它还提供了默认值的设置方式。

可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--head_color, #7F583F);

需要注意的是，变量值只能用作属性值，不能用作属性名。

如果变量值是数值，不能与数值单位直接连用。

.a {  --gap: 20;  /* 无效 */  margin-top: var(--gap)px;}

数值与单位直接写在一起，必须使用calc()函数，将它们连接。

.a{  --gap: 20;  margin-top: calc(var(--gap) * 1px);}

作用域

变量只能作用于自身以及后代元素，兄弟元素，祖先元素都不能享用。所以，如果你的变量是全局享用的，则建议放在:root上，例如：

:root {    --color: red;}

当然，也可以使用body或者html标签：

body {    --color: red;}

CSS变量就像js的变量，每个类名或者花括号就像一个function，里面的变量只有上下文以内可以获取，这就让CSS有了更多可能性。

这使得外部变量稍微改变，整个CSS都可以大大联动，且是实时的。