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>webhek.com</h1>
<h2>关注HTML5, CSS3, WEB前端技术</h2>

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

1

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

:root {
  var-companyblue: #369;
  var-lighterblue: powderblue;
}
.partnerbadge {
  var-companyblue: #036;
  var-lighterblue: #cfc;
}

h1 {
  color: var(companyblue);
}
h2 {
  color: var(lighterblue);
}
<h1>webhek.com</h1>
<h2>关注HTML5, CSS3, WEB前端技术</h2>
<div class="partnerbadge">    
      <h1>webhek.com</h1>
      <h2>关注HTML5, CSS3, WEB前端技术</h2>
</div>

这样定义后,在.partnerbadge类下的h1h2就变成了另外一种蓝色:

2

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);
}

3

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

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

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

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

阅读余下内容
 

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注


京ICP备12002735号