为什么使用 css variables
easier to get started (no transpiling)
have access to the DOM
1.local scopes
2.change width Js
3.ideal for responsiceness
perfect for themes
什么是CSS变量CSS 变量当前有两种形式：
自定义属性。
这些属性使用--where的特殊格式作为名字。例如--example-variable: 20px;即是一个css声明语句。意思是将20px赋值给--example-varibale变量。
变量。
就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如：var(--example-variable)会返回--example-variable所对应的值
总结：
带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性，其可以通过var()函数使用。
补充
CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。
CSS 变量并不支持 !important 声明。
初始值 *see prose
适用元素 *all elements
是否是继承属性 *yes
适用媒体 *all
计算值 *as specified with variables substituted
Animation type *discrete
正规顺序 *per grammar
CSS变量的继承 html <div> <div> <div> </div> <div> </div> <div> </div> css .two { --test: 10px; } .three { --test: 2em; }在这个例子中，var(--test)的结果是：
class="two" 对应的节点: 10px
class="three" 对应的节点: element: 2em
class="four" 对应的节点: 10px (inherited from its parent)
class="one" 对应的节点: 无效值, 即此属性值为未被自定义css变量覆盖的默认值
:root:root 这个 CSS 伪类匹配文档树的根元素。
对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同。 所以我们把自定义属性写在:root{}里面，html标签里面的元素会继承的。
==================
声明变量 css :root { --green: lightgreen; --lightpink: lightpink; } .item1 { background-color: var(--green); } .item2 { background-color: var(--green); } .item3 { background-color: var(--lightpink); } .item4 { background-color: var(--lightpink); }background-color的值用var()代替实现相同的效果
CSS 层级变量局部变量会在作用范围内覆盖全局变量。
css :root { --green: lightgreen; --lightpink: lightpink; } .item1 { --green: black; background-color: var(--green); }