CSS变量

使用过Sass、Less等CSS预处理器的人都知道这些语言都可以声明变量来使用。

使用变量的方便之处:

• 一是语义化，通过变量名可以更明确地知道其代表的含义
• 二是复用性，通过变量来管理，在后期维护上更加方便，尤其是配色上

CSS中的变量使用

在CSS中也可以使用变量，通过自定义属性声明--prop: value;，通过var(--prop)来使用。

.example {
    --width: 300px;
    width: var(--width);
    height: var(--width);
}

<div class="example"></div>

TIP: 之所以使用--前缀，是因为$被Sass使用了，@被Less使用了，为了区分所以并未使用$或@。

最开始自定义属性的前缀是var-，在四年前(2014年)改为了--

var()还可以与calc()结合使用。

.wrap {
    --padding: 20px;
    padding: var(--padding);
    width: calc(100% - var(--padding) * 2);
}

自定义属性的继承

在CSS样式中，一个元素没有的样式，会继承其父元素的该样式（能继承的属性）。自定义属性也同样可以通过父元素来继承。

以此来理解，如果想声明全局变量，可以使用:root选择器

:root {
    --main-color: #df3448;
    --main-width: 1000px;
}

与JS的交互

使用CSS变量更好的一点是可以与JavaScript交互。
因为是通过CSS自定义属性来实现的，所以也是可以通过JavaScript来更改的。

var example = document.querySelector('.example');
var exampleStyle = getComputedStyle(example);
console.log(exampleStyle.getPropertyValue('--width').trim()); // 300px
example.style.setProperty('--width', '400px');

Can I Use?

时间：2018年3月6日，目前除了IE与opera mini其他最新版浏览器都已支持该属性。
不同的时间看到的结果有可能不同，以后的支持也许会更好。
各浏览器兼容性传送门：Can I Use