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);}我继承根元素,是蓝色的
我应用div规则,是绿色的我应用 #alert 规则,是红色的因为继承 alert,所以我也是红色
更多关于 CSS Variables 的介绍你可以查看官方草案:http://www.w3.org/TR/css-variables/。由于还是草案,所有规则都有可能更改或替换,您也可以提交关于功能和语法上的反馈。有兴趣的话多注意官方的消息吧。
Original article: W3C 发布 CSS Variables Module Level 1 首个草案
©2015 一起CSS. All Rights Reserved.