什么是CSS变量？
自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);）
CSS变量和Less等预处理工具有什么区别？
CSS变量为我们带来一些预处理器的便利，并且不需要额外的编译。Less在webpack中需要添加less-loader进行处理。
Less使用的变量存在一个主要缺点，即它们是静态的，并且无法在运行时进行更改。但是CSS变成支持JS进行动态的修改。
CSS变量的用法入门
:root {
--main-color: #06c;
}
#foo h1 {
color: var(--main-color);
}
--main-color是自定义变量名，变量值为＃06c。 请注意，所有自定义变量均以两个破折号开头。
var() 函数检索自定义变量名并将其替换为自定义变量值，从而产生颜色：＃06c，只要在样式表中 h1 父级某个位置定义了变量，它就可以在 var 函数使用。
自定义属性受级联的约束，并从其父级继承其值。通过在 :root 伪类上设置CSS变量，然后在整个文档需要的地方都可以使用。
请注意，自定义属性区分大小写，因此 --header-color 和 --Header-Color 是不同的CSS变量。
通过媒体查询动态修改变量然后设置页面的边距。
:root {
--gutter: 4px;
}
section {
margin: var(--gutter);
}
@media (min-width: 600px) {
:root {
--gutter: 16px;
}
}
在JavaScript中修改CSS变量，动态的修改样式颜色。
<head>
<style>
:root {
--primary-color: red;
}
p {
color: var(--primary-color);
}
</style>
</head>
<p>hello world</p>
<script>
let styles = getComputedStyle(document.documentElement)
let value = styles.getPropertyValue('--primary-color') // 获取样式
document.documentElement.style.setProperty('--primary-color', 'green'); // 重新设置样式
</script>
再回顾一下设置样式的方式，自从框架用多了，原生JS都忘光光了。
任何支持style 特性的HTML 元素在JavaScript 中都有一个对应的style 属性。这个style 对象是CSSStyleDeclaration 的实例，包含着通过HTML 的style 特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。
style 对象定义了一些属性和方法。这些属性和方法在提供元素的style特性值的同时，也可以修改样式。
getPropertyValue(propertyName)：返回给定属性的字符串值。
removeProperty(propertyName)：从样式中删除给定属性。
setProperty(propertyName,value,priority)：将给定属性设置为相应的值。
通过cssText 属性可以访问style 特性中的CSS代码。在读取模式下，cssText 返回浏览器对style特性中CSS 代码的内部表示。在写入模式下，赋给cssText 的值会重写整个style 特性的值；也就是说，以前通过style 特性指定的样式信息都将丢失。
虽然style 对象能够提供支持style 特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。
获取计算的样式使用getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如":after"）。