在网页设计中，通常会定义色彩基调，相关的色彩应用都以此为基础。同一种颜色会在网页上的很多地方出现很多次，因此我们才需要定义色彩变量，以便在需要修改色彩的时候能够做到一次修改全局应用。

通常我们在会借助 CSS 预编译器来实现，因为早些年 CSS 中并没有变量的概念。直到 2016 年，CSS 中有了变量，而且实现了 JavaScript 接口，这是预编译器无法比肩的。

变量申明

CSS 中的变量申明很简单，和设置样式差不多，在属性名前面加两个 - 就可以了：

:root{
    --primary-color:lightgreen;
    --transition-duration:0.3s;
    --placeholder:'this is placeholder';
    --just-a-number:20;
}

之所以使用两个 - 作为前缀标识，是因为 CSS 中的变量出现得比较晚， Sass 把 $ 用了，Less 把 @ 占了，Stylus 干脆啥前缀都不用，而浏览器兼容属性又已经使用了一个 - 了，为了做区分，就选择了两个 -。

CSS 变量与 HTML 不一样，是严格区分大小写的，--primary-color 、 --Primary-color 和 --Primary-Color 都是不同的变量。

CSS 变量也有优先级，当在不同的选择器中申明同一个变量时，最终生效的是优先级最高的那个。

:root{
    --primary-color:lightgreen;
}
div{
    --primary-color:yellow;
}
.pink{
    --primary-color:pink;
}
#red{
    --primary-color:red;
}

变量使用

在 CSS 中使用变量需要通过 var() 函数，这个函数可以接收多个参数，以逗号分隔，第一个参数是需要使用的变量名，其后的所有值都是回退值，当变量不存在时会依次应用回退值：

:root{
    --second-color:pink;
}
h1{
    color:var(--primary-color,#ff4ffa);
}

但在实测时发现，var() 并不能接收多于 2 个参数（不知道是不是文档写得有问题）：

:root{
    --second-color:pink;
}
h1{
    color:var(--primary-color,--second-color,#ff4ffa);  /*无效，h1 的字体颜色会是黑色*/
}
h2 {
  color: var(--primary-color, #ffb446, #2cff37, #ff4ffa);   /*无效，h2 的字体颜色会是黑色*/
}

数值类型

理论上来说，变量的值可以是任意的，但在使用的时候对纯数值有限制，不能和单位等直接拼接使用：

:root{
    --gap:20;
    --content:'hello';
}
div{
    padding:var(--gap)px;   /*无效，得到是 padding:20 px; 注意中间的空格*/
}
div::before{
    content:var(--content)':world'; /*有效，得到的是 hello:world*/
}

需要使用 calc() 函数处理一下：

:root{
    --gap:20;
}
div{
    padding:calc(var(--gap) * 1px);   /*生效了*/
}

值区别

变量值应该和正常属性值的写法保持一致，如下面的例子，两个变量的含义完全不同：

:root{
    --gap-1:20px;
    --gap-2:'20px';
}
.first{
    padding:var(--gap-1);   /*有效*/
}
.second{
    padding:var(--gap-2);   /*无效*/
}

非法值

如果将变量值赋给了与之不匹配的属性，则该属性的值会采用初始值：

:root { 
    --looks-valid: 20px;
}
p { 
    background-color: var(--looks-valid);   /*非法值，将采用 transparent 作为属性值*/
}

JavaScript 操作

CSS 原生变量最大的优势就在于可以通过 JavaScript 进行操作，因为预编译器中的变量不会编译成 CSS：

// 设置变量
document.body.style.setProperty('--primary-color', '#3eaf7c');

// 读取变量
document.body.style.getPropertyValue('--primary-color');
// '#3eaf7c'

// 删除变量
document.body.style.removeProperty('--primary-color');

这让实现主题换肤功能变得非常简单，只需要准备两套变量值就可以了，甚至还可以让用户随心所欲地改变页面颜色。

结语

主流浏览器早已经支持 CSS 变量了，只是因为用户的问题不能全面使用。

变量的出现虽然增强了 CSS 的功能，但和预编译器相比还是不够，预编译器依然有它们的优势，不过我相信以后会越来越好的。