这几年随着iOS和Android设备的发展，WEB技术发展也真是挺快的。连万年不变的的CSS也是新概念频出。关于布局的Flex和Grid自不必说，连变量这种CSS预处理语言的关键部件，也直接原生支持了。而且主流的浏览器还都支持的不错，算上换了webkit内核和IE，基本上都不用太过虑浏览器兼容性问题了。
CSS变量的基本规则
- 变量定义使用两个中划线开头：
--。 - 变量有作用域，类似CSS选择器的作用范围，上下级的作用域内变量可以重新赋值。
- 最高的作用域推荐使用
:root伪CSS类，这样基本上就是在定义全局变量了。 - 变量通过关键字
var()来在书写CSS属性的时候使用，var()接受两个参数，第一个是变量名，第二个是变量不存在的时候的默认值。 - 使用
var()时如果变量不存在，也没有提供第二个变量，浏览器会使用从父元素继承过来的属性值或者浏览器缺省值。
通过JavaScript操作CSS变量
获得DOM元素的内联CSS变量(inline style):
element.style.getPropertyValue("--my-var");
获得DOM元素的有效CSS变量(computed style)，不管这个变量是不是在当前元素定义的:
getComputedStyle(element).getPropertyValue("--my-var");
在DOM元素上设置一个CSS变量:
element.style.setProperty("--my-var", jsVar + 4);
不要与CSS环境变量混淆：var() vs env()
var()是用了使用用户自定义的CSS变量的关键字。
env()是用来使用浏览器在不同的环境中，例如特别的手机设备上，定义的环境变量。所以env()就是全局的，没有作用域概念了。
比如iOS设备有一组safe-area-inset-*环境变量，使CSS可以定义页面的安全可视区域。
参考：
- https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
- https://developer.mozilla.org/en-US/docs/Web/CSS/env
