不用Less、Sass我们照样可以在原生CSS中使用变量

大家都知道CSS是一种标记性语言，原本不支持编程的属性，无法实现定义和使用变量与方法。但在我们实际的开发中，会经常遇到一些棘手的问题，比如说要实现系统整体的皮肤切换，这要求我们必须修改所有的颜色，改起来很麻烦也很痛苦。为解决这样的痛点，Less、Sass这样的CSS预编译语言应运而生，它可以帮助创建变量，编写共用的方法，极大的增强了CSS编写效率和灵活性，当然CSS标准制定者也看到了一点，他们在CSS3标准中也增强了对这方面的支持，今天我们就主要讲讲如何在原生CSS中添加和使用变量

定义变量

我们定义变量的时候，变量名前面要加两根连词线（--），Less中是@，Sass中是$

body{
  --color: red;
  --font: 24px;
}

这样我们就定义了--color和--font两个变量，那如何使用它们呢？

使用变量

我们使用var()函数来读取变量

body{
  --color: red;
  --font: 24px;
  border: 1px solid var(--color);
}

全局使用

像上面提到的切换皮肤的需求，我们最好设置全局的变量，这样调整时，只需要修改变量值就可以实现整体切换效果。具体来讲我们可以在根元素设置变量，其他元素就可以调用这个变量，具体实现如下

:root{
  --color: red;
  --font: 24px;
}

.header{
  background: var(--color)
}
.footer{
  border: 1px solid var(--color)
}

最后 🙌

好啦，以上就是我本次分享的全部内容啦，如果你觉得我的文章对你有一丢丢帮助，那么请不要吝啬你的赞👍哦，阿门~