css值变量吗,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);

}

WebTian.com

关注HTML5, CSS3, WEB前端技术

这里定义了两个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);

}

WebTian.com

关注HTML5, CSS3, WEB前端技术

WebTian.com

关注HTML5, CSS3, WEB前端技术

这样定义后，在.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版就可以体验上面的这些代码演示的新功能。