持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第29天，点击查看活动详情

一、前言

是不是经常有这种情况，需求说，每个人都有喜欢的颜色风格，所以我们需要提供多样化的颜色主题给用户选择，最好来个一键切换的那种，颜色还能自定义的就更好了。

如果只提供几种颜色选择，那可以多写几套css，然后切换显示，前提你不嫌麻烦的话。

如果数量一多，这样的css就会很臃肿，而且每加一种颜色你就得多写一套，这不是把摸鱼的时间都给压榨没了吗？

所以正确的做法应该是使用css变量，一劳永逸，毕竟整体布局没有变化，代码逻辑也相同，唯一变化的只是颜色，用变量控制是最好的了，这样扩展性也强，需求喜欢加什么颜色就加什么颜色。

二、如何使用

比如我在root标签里声明了一个--color1的变量（变量名必须以--开头），那我就能在当前组件的所有css部分，调用这个变量，因为这里的:root,限定了变量的使用范围，在:root中声明相当于全局属性，:root选择器是一个伪类，匹配文档的根元素，所有主流浏览器均支持 :root。

// 放在css开头
:root {
  --color1: #234141;
}

然后就可以在css样式里使用了，比如我在count里用var方法就可以使用上面定义的--color1变量

.count {
  color: var(--color1);
  background: var(--color2);
}

有时你不想用全局变量，只想在局部里使用变量，那可以采取以下的局部定义写法。

上面我们可以看到我还使用了一个--color2的变量，这个变量是我从标签页里传值过来的。

<div class="count" :style="{'--color2': color}">

color是我在js的data里定义好的一个变量，将这个变量传值到名为count的class属性里。

这种写法和以下的写法作用域相同，都是只能在count属性里使用该变量。

.{
   --color2: #fff;
 }

通过标签传值的方式，我们可以随意在js中修改color的值，再放到css样式中进行应用。

js操作数据的方法那就多种多样了，这里只放个掘金代码给大家提供一种演示效果，大家伙可以选择自己需要的方式进行修改变量值，反正只要在js里能修改的变量，对我们来说操作空间就是无限大的了，能修改并且动态响应就可以了。

可能某个颜色（不只是颜色，其他样式也可以），在全局很多地方都用到了，那一旦修改就需要全局搜索，每一处地方都手动修改。如果使用了css变量，那只需要修改css变量一处地方即可，提高效率，降低出错率（可能改漏）。

变量名是可以自定义的，那就最好是顾名思义，这样会提高代码的可读性。

放个掘金的链接，给大家试试。 code.juejin.cn/pen/7158359… css变量还是能大大提高我们前端工程师的效率的，快去试试看吧。

ps: 我是地霊殿__三無，一起快乐摸鱼吧！