CSS很美妙,能够为您的页面穿上衣裳,各种各样五彩斑斓的衣裳,但是对于开发者来说,他又不够灵动,于是乎有了各种各样的预处理器Sass、LESS、Stylus(笔者建议Sass的SCSS语法),这些预处理器可以很大程度的提高CSS的灵活性,增强CSS的代码组织与维护。但是毕竟不是亲生的,然后负责CSS开发的那些大牛们坐不住了,开始给CSS赋予一些新的特性,本文就来探讨下CSS变量的进展与应用。
W3C的关于CSS变量的最新探索体现在CSS Custom Properties for Cascading Variables Module Level 1中,最新更新在2014年5月6日,目前为工作草案,所以本文章只为研究探索只用,所涉知识点存在修改的风险,W3C修改之后本文会同步更新。
所为何来
我们知道,一个网站或应用往往包含大量的CSS,这些CSS里的一些属性值往往重复使用,比如网站使用的颜色体系,背景色、文字颜色、链接颜色等,这些重复使用的属性值散落在大量的CSS文档中,如果需要修改其中的一些值,例如改版颜色,那简直是个噩梦,我们需要每个文件进行查找、替换,眼花缭乱、机械重复的大量操作难免出错、难免头大,所以CSS代码的组织与维护已经成了困扰CSS使用的重要瓶颈。
当然,CSS预处理可以有效的解决这些问题,预处理器的使用已经成了事实上的行业标准,Sass正成为越来越多前端er的选择。但是,我们需要部署编译环境、需要让开发工具支持Sass等,需要一些额外的工作。遇事不免畅想,如果有一天,我们可以像使用普通CSS那些使用预处理器?
于是便有了W3C的CSS Various。
剥茧抽丝
关于变量,不外乎定义和使用,接下来我们分别解析。
定义变量
我们把需要重复使用的值存放到一个自定义的属性中,这个自定义的属性用双虚线开头标识,如下面代码所示。
/* 变量定义 */
:root {
--main-color: #06c;
}
/* 变量使用 */
#foo h1 {
color: var(--main-color);
}
变量名
自定义属性名和变量名遵循CSS标识符的定义规则,可以包含字母数字(a-z,A-Z,0-9)、ISO 10646字符列表的U+00A0及以上字符、下划线(_)、连字符(-)等,不能以数字、连字符+数字、双连字符开始。
CSS变量语法中,大小写敏感,可以包含字母、数字、下划线、连字符,且最好不以数字、连字符开