CSS变量

全栈程序员-站长 • 2026年3月19日下午4:06 • 未分类 • 阅读 1

今天的问题是如何实现一个主题切换功能，比如我们有黑白两个主题，常规的做法是编写两个CSS主题文件

light.css

.theme-light{ background-color:#fff; color:#444 } .theme-light a{ color:#444; }

black.css

.theme-black{ background-color:#000; color:#fff; } .theme-black a{ color:#fff; }

然后借助js来切换加载。或者将两个主题样式写在一起，给外层容器一个class标识，通过js修改这个标识来达到切换主题的效果

那么问题来了，那天我想加一个theme-red该怎么办，再加一个read.css文件？或者将上边的类似代码再写一遍，不同的只是改一下里面的color值吗？

DRY原则告诉我们，重复代码是需要抽取出来公共部分，所以我们希望达到的效果是，定义一个变量，然后再需要的地方使用该变量即可，这就是我们今天要讲的css变量

用法

.box{ --color:red; }

使用

.box a{ color:var(--color) }

注意：局部变量的使用范围是当前元素以及其子元素，意思是.box下面的子元素也是可以使用这个变量的。

全局变量则是在外部的伪类 :root{} 重定义的，适用于所有元素

:root{ --color:blue; }

使用方式和局部变量一样

.box{ color:var(--color) }

注意：在当前元素定义的变量会覆盖祖先元素（包括全局变量）的同名变量，这里面是存在优先级和覆盖的，比如下面的样式

:root{ --color:blue; } .box{ --color:red; } .box a{ color:var(--color); }

a标签的字体颜色最终会是红色。

回到最初的命题，这里我们明显是需要全局变量，通过js切换变量颜色

function change(color){ let root=document.documentElement.style; root.setProperty('--color',color); } change("red");

兼容性

东西是好东西，但是能不能用呢？这可能是大家比较关心的问题，现代浏览器基本上都支持，不过IE所有版本均不支持，所以，移动端项目基本上是可以放心使用的，PC端可能需要根据自己的需求来决定是否使用了。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/206254.html原文链接：https://javaforall.net