CSS变量初体验

根据Mozilla软件工程师Cameron McCormack的透露，火狐浏览器从V29版开始支持一种新的CSS特征——CSS变量。下面这个视频可以让你大概的了解一下CSS变量的基本情况：

CSS变量定义通过在变量名前加var-前缀实现，引用时使用var()获取变量值。例如：

:root {
var-companyblue: #369;
var-lighterblue: powderblue;
}
h1 {
color: var(companyblue);
}
h2 {
color: var(lighterblue);
}

<h1>WebTian.com</h1>
<h2>关注HTML5, CSS3, WEB前端技术</h2>

这里定义了两个CSS变量，分别是companyblue 和lighterblue ，变量的应用范围是document的根节点，使用效果如下：

CSS变量是有应用范围的，这就是说，你可以覆盖它们：

:root {
var-companyblue: #369;
var-lighterblue: powderblue;
}
.partnerbadge {
var-companyblue: #036;
var-lighterblue: #cfc;
}
h1 {
color: var(companyblue);
}
h2 {
color: var(lighterblue);
}

<h1>WebTian.com</h1>
<h2>关注HTML5, CSS3, WEB前端技术</h2>
<div class="partnerbadge">
<h1>WebTian.com</h1>
<h2>关注HTML5, CSS3, WEB前端技术</h2>
</div>

这样定义后，在.partnerbadge类下的h1和h2就变成了另外一种蓝色：

CSS变量可以赋予任何值，可以像使用任何其它值一样使用它们，例如，你可以把它们放到calc()计算表达式里。CSS变量值可以重新赋值，比如，在不同的media query里赋不同的值。下面是一些使用场景的例子。

:root {
var-companyblue: #369;
var-lighterblue: powderblue;
var-largemargin: 20px;
var-smallmargin: calc(var(largemargin) / 2);
var-borderstyle: 5px solid #000;
var-headersize: 24px;
}
.partnerbadge {
var-companyblue: #036;
var-lighterblue: #369;
var-headersize: calc(var(headersize)/2);
transition: 0.5s;
}
@media (max-width: 400px) {
.partnerbadge {
var-borderstyle: none;
background: #eee;
}
}
/* Applying the variables */
body {font-family: 'open sans', sans-serif;}
h1 {
color: var(companyblue);
margin: var(largemargin) 0;
font-size: var(headersize);
}
h2 {
color: var(lighterblue);
margin: var(smallmargin) 0;
font-size: calc(var(headersize) - 5px);
}
.partnerbadge {
padding: var(smallmargin) 10px;
border: var(borderstyle);
}

根据上面的CSS定义，当浏览器窗口小于400px时，mediaQuery就会发生作用，里面的CSS变量值发生变化。

CSS变量这个新的CSS功能是在火狐Aurora版里第一次出现，也只是实现了基本功能。在这项功能真正的出现在正式发布版前，还有不少的CSS3规范里规定的内容要实现。Cameron对这些有一个比较详细的说明：

按照CSS3规范，火狐里还没有实现的部分是CSSVariableMap，它是一个对象，功能很像JavaScript里的Map，有get，set等其它方法，使用这些方法能从CSS样式声明中获取变量的值。需要注意的是，你仍有可以使用getPropertyValue 和setProperty等方法从DOM值获取这些变量，但需要使用完整名称，例如var-theme-colour-1。

试一试CSS变量吧，使用最新的火狐Nightly版就可以体验上面的这些代码演示的新功能。