很早直接就了解到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都可以大大联动，且是实时的。
作者：旧旧的 <393210556@qq.com> 解决问题的方式，就是解决它一次
CSS变量使用解析
原文地址：https://www.cnblogs.com/widgetbox/p/10445102.html