在前端网站开发中，一键换肤是一个非常常用的需求，在以前的实践中常常需要编写多个css文件，根据用户不同的选择加载不同的css样式文件，这种方式虽然可以生效，但是效率太低，可维护性也不足，因此需要新的方案来替代。
2012年W3C公布了CSS Variables的首个公开草案，2017年3月微软edge浏览器也宣布支持 CSS 变量，此时所有主要浏览器都已经支持这个 CSS 新功能。从此以后，许多网站都采取css 变量的方式来实现诸如一键换肤等功能，大大减少了开发量，同时也更易维护。下面来介绍下css变量。

CSS 变量是什么？怎么使用？

CSS 变量（CSS variables），又称为自定义属性（custom properties），是一种可以在 CSS 中定义、复用和更新的值，以便在整个文档中维护一致性和可读性。与预处理器中的变量不同，CSS 变量是在运行时计算的，这意味着可以根据条件或用户输入动态地更新它们的值。

CSS 变量的语法是使用 -- 前缀定义一个变量，例如：

:root {
    --el-color-primary: #3D73F5;
    --el-font-size-base: 14px;
    --el-font-weight-primary: 400;
    --el-text-color-primary:#333;
    --scrollbar-width:8px;
 }

在上面的示例中，:root 伪类选择器用于定义文档树的根元素，可以在整个文档中重复使用 定义好的这些变量，而 var() 函数用于引用它们。
应用如下：

.btn {
    border: 1px solid var(--el-color-primary);
    font-size: var(--el-font-size-base);
    font-weight: var( --el-font-weight-primary);
    color: var(--el-color-primary);
}

从上面可知，通过变量的方式来定义css样式，我们只需修改:root中声明的变量值，则可以全局修改所有使用改变量的样式。所以实现一键换肤，我们只需修改声明的变量值即可。