很早直接就了解到CSS变量相关的内容，奈何之前使用价值不高（很多主流浏览器不兼容）

最近发现主流浏览器都已经支持了这一变化

这一重要的变化，可能会让你发现，原生CSS从此变的异常强大~，下面看一下如何使用

​变量的声明​

css的变量声明标识符为：--，即变量名前面加2个连接线

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都可以大大联动，且是实时的。


​作者：旧旧的 解决问题的方式，就是解决它一次​