变量声明

通过变量名前加--声明变量（因为$和@被Sass和Less占用了）
变量可在不同选择器种重复声明，读取变量时按 CSS "层叠"（cascade）优先级读取
全局变量通常在根元素:root中声明，保证能被所有元素获取

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

读取变量

通过var()读取
可传入第二个参数表示默认值，该参数中逗号和空格会被视为参数的一部分

a {
  color: var(--foo);
  font-family: var(--font-stack, "Roboto", "Helvetica");
}

如果变量是一个数值，也可以通过calc()参与计算

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

兼容性处理

a {
  color: #7F583F;
  color: var(--primary);
}

JS操作

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');