CSS3原生变量（Native Variables）新特性简介

对Web开发者来说，一个盼望已久的特性是CSS终于支持原生变量了！

变量是程序语言中用来解决代码重复和进行表达式计算的关键概念（想想数学方程式中的x）。

这样CSS看起来更像一门样式“语言”了。在这之前，我们得使用SASS(SCSS)预编译方式来支持变量，现在你可以直接在CSS代码中使用变量。该特性的规范描述在CSS3级联变量模块的自定义属性中，提供了一种方法来让开发者定义变量，并赋值给CSS属性（property）。

和SASS预处理器相比，这种CSS原生变量可以被JS脚本所动态操作，可以实现更好的交互体验和动画效果。

语法格式

:root {
    --base: #BADA55;
}
.hl {
    color: var(--base);
}

上面的代码在根伪元素中声明了一个--base变量，通过var()的形式赋值给class为h1的所有元素的color属性。

可继承性

我们知道CSS的样式具有可继承性，变量形的属性值也类似。

比如下面的HTML代码：

<div class="one">
  <div class="two">
    <div class="three">
    </div>
    <div class="four">
    </div>
  <div>
</div>

样式代码如下：

.two {
  --test: 10px;
}
.three {
  --test: 2em;
}

那么.four的--test变量值为10px（继承自two），.three为2em，而.one元素的--test变量未定义。

浏览器兼容性

除IE外，所有主流浏览器都已支持，移动手机上对于Android需要使用Chrome 49.0+，而iPhone上需要Safari 9.1+。

在线实例

1. 使用CSS3变量和JS动态改变元素颜色

2. 使用CSS3变量实现的进度条界面组件