CSS3的变量

第一步：认识css3自定义属性
在需要的作用域中定义变量(在任意的全局css文件或者style中定义即可)，如：

//:root作用于全局
:root{
    --theme-color:red; // 这里定义了一个--theme-color变量， 值为black
}
//#app作用于id为app的节点内
#app{
    --theme-back-color: black; // 这里定义了一个--theme-back-color变量，值为black
}

使用方式：1.在css中使用，如：在.title中使用：

.title{
	color: var(--theme-color)
}

使用方式：2.在js中使用，如：

// document.documentElement 代表相关的容器如：#box
//js中获取--theme-color的值
var value = getComputedStyle(document.documentElement).getPropertyValue("--theme-color");
//js中更改--theme-color的值
document.documentElement.style.setProperty("--theme-color","black");

优点：只需一套CSS文件； 换肤不需要延迟等候；对浏览器性能要求低；可自动适配多种主题色；
缺点： 兼容性问题、不支持IE， 2016年前的chrome，safari;