在CSS中定义全局变量
平时我们使用css来填充颜色时一般直接采取对于HEX色值即可，但这样往往会显得很囊肿而且不宜维护（如果需要整体更换色调会非常麻烦）对于主题色调来说，更改一次实现全局应用才是硬道理..
定义变量
为了实现以上效果我们需要使用 css3 新特性 var() 来定义全局变量并使用。首先我们在 :root 内定义变量名（注意定义该变量应在全局css中定义以确保全站使用），格式如下
代码语言：javascript复制:root {
--theme-color-pri: #eb6844;
--theme-color-sec: #2b2b2b;
//包括但不限于颜色，字体大小等等
--size: 12;
--default-size: 1rem;
}使用变量
变量定义完成后即可在任意页面调用已设置的变量，使用方式如下
代码语言：javascript复制div {
color: var(--theme-color-pri);
background: var(--theme-color-sec);
font-size: var(--default-size);
}额外配置
以上为简单使用流程，但有时候也会有特殊情况
变量错误使用
变量不存在或变量格式错误时，可以采取备用属性（如果找不到第一个变量使用第二个具体值代替）
代码语言：javascript复制div.backup {
color: var(--theme-color-pri,orange);
}上面是使用具体值做backup，如果需要使用设定好的变量做backup需要做以下配置（如果第一个变量已存在，则不会使用第二个变量）：
不能写成：var(–color,–color1,blue)
代码语言：javascript复制div.backup-var {
color: var(--theme-color-pri,var(--theme-color-sec));
}结合 calc() 使用
当var和calc使用的时候，var所获取的对象只能为数字，外乘或除(n)px，类似px这种单位不能直接跟在var的后面
不能写成：font-size:calc(1 * var(–size)px)
代码语言：javascript复制div.calc {
font-size: calc(1px * var(--size));
}使用 js 操作 var 属性
使用 getPropertyValue 和 setProperty 来进行设置
代码语言：javascript复制//获取标签上style的var属性
element.style.getPropertyValue("--size");
//获取非标签上style的var属性
getComputedStyle(element).getPropertyValue("--size");
//设置style上的var属性
element.style.setProperty("--size", 20);其他事项
兼容
老生常谈的问题了，在 Can I use 中查询各浏览器的兼容性，结果如下
Opera Mini / IE全挂233（好在新版 Edge 完美支持）
利弊
好处是便于维护了，缺点有增加了文件大小，不足在兼容性。
色板
附一份网站的色板
代码语言：javascript复制:root{
--theme-color: #eb6844;
--preset-c: #cccccc;
--preset-d: #dadada;
--preset-f: #ffffff;
--preset-fa: #fafafa;
--preset-s: #f5f5f5;
--preset-6: #666666;
--preset-8: #888888;
--preset-9: #949494;
--preset-4a: #4a4a4a;
--preset-3a: #3a3a3a;
--preset-2b: #2b2b2b;
--preset-link: #334768;
--preset-okay: #4fc323;
--preset-okay-l: #f6fff0;
--preset-caution: #f9ac1d;
--preset-caution-l: #fffbeb;
--preset-alert: #f4222c;
--preset-alert-l: #fff1f0;
}以上，有问题评论留言反馈。
