有关Css自定义变量的介绍

首先，我先来说说什么是“自定义变量”顾名思义，就是可以随意定义变量名的一种变量。通常在前面都会加上 - -作为记号，它的作用和font-size、color等正式属性没什么区别。那为什么要在前面加上 “- - ”呢？因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。
图中pulse选择器中定义了两个名为color和hover的属性，当然你也可以定义其它的名字，比如 temp、art、slide等等，只要你自己明白就行了。需要注意的是”- -color”和”- -Color”是不一样的。

Var( )函数

这哥们主要的作用就是用来读取你所定义的变量，var()函数还可以使用第二个参数，表示变量的默认值。如果自定义变量不存在，就会使用这个默认值。

color: var(--hover, #ccc);

第二个参数不处理内部的逗号或空格，都视作参数的一部分。
var()函数还可以用在变量的声明。

.pulse {
  --color: red;
  --logo: var(--color);
}

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

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

变量值的问题

如果变量值是一个字符串，可以与其他字符串拼接。

--first-name: "William";
--name: var(--first-name) "Yao";

如果变量值是数值，不能与数值单位直接连用。

.pulse {
  --tat: 100;
  /* 无效 */
  margin-top: var(--tat)px;
}

如果必须使用，那就要用calc()函数，将它们连接。

.foo {
  --tat: 20;
  margin-top: calc(var(--tat) * 1px);
}

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的”层叠”（cascade）规则是一致的。

:focus { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

上面代码中，三个选择器都声明了–color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。