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变量语法中，大小写敏感，可以包含字母、数字、下划线、连字符，且最好不以数字、连字符开头。
/* 正确的变量名 */:root{ --link-color: #06c; --_hover-color: #f6c; --toolTip_color: #ff0; --main_background_color: #333;}/* 下面两个变量都有效，表示两个变量 */:element{ --link-color:#06c; --Link-color:#66c;} 变量值可以接受任何符合语法的值，它的默认值为" "，但是不能为""，否则会报错。
变量的继承和覆盖变量的声明和使用遵循CSS的层叠特性，类似于普通编程语言里面的变量作用域。请看下面的代码。
:root { --color: blue; }div { --color: green; }#alert { --color: red; }* { color: var(--color); }I inherited blue from the root element!
I got green set directly on me!
查看更多关于CSS变量试玩儿_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did107162