CSS自定义变量

什么是自定义变量

自定义属性（有时也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。
由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(–main-color);）
复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。
举例：同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换。
自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。
如：–main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。
自定义属性受级联的约束，并从其父级继承其值。

变量的声明

声明一个自定义属性，属性名需要以两个减号（–）开始，属性值则可以是任何有效的CSS值。
和其他属性一样，自定义属性也是写在规则集之内的，如下：

element {
  --main-bg-color: brown;
}

注意：规则集所指定的选择器定义了自定义属性的可见作用域。
通常的最佳实践是定义在根伪类 :root 下，这样就可以在HTML文档的任何地方访问到它了：

:root {
  --main-color: red;
  --bg-color: pink;
  --main-font-size: 15px;
}

然而这条规则不是绝对的，如果有理由去限制你的自定义属性，那么就应该限制。

注意：自定义属性名是大小写敏感的。 --my-color 和 --My-color 会被认为是两个不同的自定义属性。

var() 函数

读取变量

.wrap{
  color: var(--main-color);
}

使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分。

.wrap{
  height: var(--el-height,400px);
  font-family: var(--font-stack, "Roboto", "Helvetica");
  padding:var(--pad, 10px 20px);
}

变量的声明

:root {
  --length: 400px;
  --mian-width:var(--length);
}

注意：变量值只能用作属性值，不能用作属性名。

.foo {
  --side: margin-top;
  var(--side): 20px;  /* 无效 */
}