一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

最近项目中用到了css变量。这边整理了一下，简单介绍给的大家。顾名思义就是在css中使用变量，注意是原生css,而不是sass、less这些css预处理器,那它和这些预处理器中的变量有什么区别呢，以我对两者之间的使用认为最大的区别是本质上sass等定义的变量相当用const定义时常量，而css变量是let动态变量，是可以在运行时进行修改的。

如何定义它

声明时在变量前面添加--会表示为css变量，可以定义在css的任意选择器下面，也可以定义在标签的style上面。

body {
  --theme: blue;
  --fontsize: 14px;
}

<div style="--theme: blue; --fontsize: 14px;"><div>

如何使用它

在写样式时使用var(--xx)调用括号内的变量的值，可以在定义该变量的标签下任何层级中使用该变量，也可以重复定义，但是使用变量的标签的css会在他的父标签父父标签一层层往上找，一直找到到定义的对应变量。如果没有找到怎么办，这里var()第二个参数可以填写默认值，默认值可以是一个css的具体值，也可以是另一个css变量，变量之间可以一直嵌套。变量只能用作css的值不能用成css的名称，这一点和scss中的变量有点区别。

.header {
  background: var(--theme);
  font-size: var(--fontsize, 12px);
  font-size: var(--fontsize, var(--size, 13px));
}

哪些场景能用上它

1.系统主题，我们可以将主题颜色定义在body或者html下，在页面用到主题的地方使用主题变量即可，切换主题就通过修改变量值的方式。如何修改比如将不同主题放到不同的样式明下，js可以只需控制定义的样式名即可，简单方便。
2.响应式布局：可以将变量定义在不同屏幕的@media中如文字大小等，使得不同的屏幕有不同的变量值。
3. js不方便控制样式的场景： 如鼠标移入修改背景色，此背景色是动态传入的，不适用css变量的化需求通过js监听移入事件再控制样式，如果是css变量的化之间将css变量通过style传入进去，再通过css的hover引入变量即可。

等等一系列变量的用法。