为什么使用 css variables

借用Scrimba上的：

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 class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></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 标签里面的元素会继承的。

html

<body>
  <section id="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
  </section>
</body>

css 

#container {
  width: 400px;
  height: 150px;
  background-color: #ffeead;
  border: 1px solid #666;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
#container > div {
  width: 70px;
  height: 50px;
}
#container div:nth-child(2n) {
  background-color: lightgreen;
}
#container div:nth-child(2n + 1) {
  background-color: lightpink;
}

声明变量

css 

:root {
  --green: lightgreen;
  --lightpink: lightpink;
}

#container div:nth-child(2n) {
  background-color: var(--green);
}

#container div:nth-child(2n + 1) {
  background-color: var(--lightpink);
}

background-color 的值用 var()代替实现相同的效果

CSS 层级变量

局部变量会在作用范围内覆盖全局变量。

css 

:root {
  --green: lightgreen;
  --lightpink: lightpink;
}

#container div:nth-child(2n) {
  background-color: var(--green);
}
#container div:nth-child(2n + 1) {
  background-color: var(--lightpink);
}

.item1 {
  --green: black;
  background-color: var(--green) !important; /*选择器权重  100+10>10 所以加了!important*/
}

使用多个变量

css

:root{
      --word1:"are";
      --word2:"you";
      --word3:"ok";
}

.item2::before {
      content: var(--word1) " " var(--word2) " " var(--word3);
}

完~~

CSS-非常有用的css变量