CSS原生变量使用教程和几个Tips

CSS使用教程

2017年3月，Edge浏览器支持CSS变量。

声明

变量名前面要加两根连词线(--)

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

上面代码中有两个变量，--foo 和 --bar（为什么用--？因为$被Sass用了，@被less用了）

各值都可以放入CSS变量，比如变量名中带-。

变量名大小写敏感。

var()函数

var()函数用于读取变量，也可用于变量声明，只能作为属性值，不能用作属性名。

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}
:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

var函数第二个参数，表示变量的默认值。参数可以带逗号和空格。

color: var(--foo, #7F583F);
var(--font-stack, "Ro