使用css简单实现动态换肤功能

      最近公司的项目要做换肤的功能，当时时间有点赶，来不及写多套css来根据皮肤切换css文件实现这个功能，直接被我抛弃了。突然想到sass中有变量这东西可给页面相同的css结合起来，工作量就没那么大，但是sass变量是编译后就不能修改了，又被我抛弃了。。。（其实用sass的做法也能实现，预先写好根据不同class给不同变量赋值）
      下面介绍一下当时最终决定使用的方案，那就是使用CSS3新功能：CSS变量。CSS 变量是我们自定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 var()来访问。（比如 color: var(--mainColor);）如何自定义属性名呢，请看下面的代码：

<style>
  /*声明一个全局 CSS 变量*/
  :root {
    /* 顔色属性名*/
    --mainColor: white;
  }
  /*使用一个全局 CSS 变量*/
  body{
    background-color: var(--mainColor)
  }
</style>

      现在可以自定义css属性了，在换肤功能实现时我们就需要使用JS改变这个CSS变量的值来实现换肤。请看下面代码：document.documentElement.style.setProperty(' --mainColor', 'yellow')
      文章demo代码

PS：这篇文章本来是四月份写的，结果忘记发布一直存在草稿箱里。最近在看你所不知道的JS这系列书的时候想着写篇博客巩固一下知识，结果发现草稿箱里存放了好几个月的文章就趁机修改了一下就发布了。我知道写的肯定不够完整，想要深入一点了解请点击下面的这个链接（主要还是懒QAQ）
使用CSS变量