CSS变量

最新推荐文章于 2024-05-21 23:34:10 发布

风轻云淡180518

最新推荐文章于 2024-05-21 23:34:10 发布

阅读量1k

点赞数

分类专栏： css 文章标签： css css变量

本文链接：https://blog.csdn.net/qq_20343517/article/details/82795071

版权

14 篇文章 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修改这个标识来达到切换主题的效果

<body class='theme-light'>


</body>

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

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

用法

定义变量使用 --变量名，使用变量需要用到 var(--变量名)
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端可能需要根据自己的需求来决定是否使用了。

关注