W3C发布CSS变量草案

W3C CSS 工作组于4月10日发布了 CSS Variables Module Level 1 首个草案。CSS Variables 是什么呢?很明显,Variables 是变量,CSS Variables 就是 CSS 变量。

只要有点开发经验的人都知道定义变量是非常有用的,所以在 CSS 中如果在样式表中经常使用某个值(比如某个颜色或某种字体),可以将其定义为变量,修改样式表时只需更改该变量的值,就更新整个样式表,而无需逐个更改每个样式规则。

CSS Variables 的定义必须以“var-”开头,后面直接跟变量名,然后是属性值,如“var-fontColor:#333”,“fontColor”就是变量,可以在需要的时候以“var(fontColor)”引用。如:

:root {
        var-fontColor:#333;
}
body {
        color:var(fontColor);
}

由于变量名可以任意命名,所以如果您根据具体情况命名的话,那么样式表就会显得更有”语义”,就更容易阅读。

如果一个变量的属性被声明多次,则会根据 CSS 选择器的权限对应应用。如:

:root { var-color:blue;}
div { var-color:green;}
#alert { var-color:red;}
* { color:var(color);}

<p>我继承根元素,是蓝色的</p>
<div>我应用div规则,是绿色的</div>
<div id='alert'>
  我应用 #alert 规则,是红色的
  <p>因为继承 alert,所以我也是红色</p>
</div>

更多关于 CSS Variables 的介绍你可以查看官方草案:http://www.w3.org/TR/css-variables/。由于还是草案,所有规则都有可能更改或替换,您也可以提交关于功能和语法上的反馈。有兴趣的话多注意官方的消息吧。

原文地址:一起CSS http://www.17css.com/css-variables-draft-2012-4-10/

原文链接:,转发请注明来源!

发表评论