CSS变量

变量的声明

---

声明变量的时候，变量名前面要加两根连词线（--），看下图：

    body {
      --foo: #7F583F;
      --bar: #F7EFD2;
    }

也就是说，把颜色#7F583F用变量--foo来代替。
有效范围是body选择器范围。
各种值都可以用CSS变量来代替。

    :root{
      --main-color: #4d4e53;
      --main-bg: rgb(255, 255, 255);
      --logo-border-color: rebeccapurple;

      --header-height: 68px;
      --content-padding: 10px 20px;

      --base-line-height: 1.428571429;
      --transition-duration: .35s;
      --external-link: "external link";
      --margin-top: calc(2vh + 20px);
    }

变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

var() 函数

---

var()函数用于读取变量。

    a {
      color: var(--foo);
      text-decoration-color: var(--bar);
    }

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

    color: var(--foo, #7F583F);

作用域

  body {
    --foo: #7F583F;
  }

  .content {
   --bar: #F7EFD2;
   }

上面代码中，变量--foo的作用域是body选择器的生效范围，--bar的作用域是.content选择器的生效范围。

由于这个原因，全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。

    http://www.ruanyifeng.com/blog/2017/05/css-variables.html