CSS变量试玩儿

分手后的思念是犯贱 2022-08-07 00:23 173阅读 0赞

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标识符的定义规则][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); }
    
    <p>I inherited blue from the root element!</p>
    <div>I got green set directly on me!</div>
    <div id='alert'>
      While I got red set directly on me!
      <p>I’m red too, because of inheritance!</p>
    </div>

### 使用变量 ###

我们可以通过var()的方式使用变量，但是不能在属性名、选择器中使用变量，只能在属性值中使用变量，使用变量的语法如下所示。

/* * var()接受两个参数，自定义属性名(变量名)、缺省值 * 第一个参数custom-property-name调用变量 * 第二参数可选，指定自定义变量无效时的缺省值。 */
    var() = var( <custom-property-name> [, <any-value> ]? )
    
    /* for example */
    /* In the component’s style: */
    .component .header { color: var(--header-color, blue); }
    .component .text { color: var(--text-color, black); }
    
    /* In the larger application’s style: */
    .component { --text-color: #080; /* header-color isn’t set, and so remains blue, the fallback value */ }

我们可以嵌套调用CSS变量。

/*one example */
    :root { --main-color: #c06; --accent-background: linear-gradient(to top, var(--main-color), white); }
    /*another example */
    <one><two><three /></two></one>
    one   { --foo: 10px; }
    two   { --bar: calc(var(--foo) + 10px); }
    three { --foo: calc(var(--bar) + 10px); }

## 兼容并包 ##

对于前端开发者来说，兼容并包永远是一个难以企及的痛，作为一个具有“极客思维”的前端er，我们还是要努力。  
首先来看看，CSS变量目前的惨不忍睹的兼容性，如下图所示，数据来自[caniuse][]。  
![这里写图片描述][20150212100006773]  
全线飘红有木有，只有firefox认识，还怎么玩。  
有兄弟说，我就要任性，就要玩怎么办？老外写了个[补丁][Link 1](polyfill)，大家不妨一试。

## 只求甚解 ##

综上所述，CSS变量处于草案阶段，浏览器兼容一般，今天写这篇文章仅为开阔视野，储备知识之用。商用还请大家使用Sass或LESS等预处理器。  
如欲了解更多详情，使用下面的列表乃求甚解。

*  [W3C reference][]
 *  [MDN info][]
 *  [caniuse][]

--------------------

## 致谢 ##

*前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助。*  
*本文原文链接，[http://blog.csdn.net/whqet/article/details/43758285][http_blog.csdn.net_whqet_article_details_43758285]*  
*欢迎大家访问独立博客[http://whqet.github.io][http_whqet.github.io]*

[CSS]: http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
[caniuse]: http://caniuse.com/#search=css%20variables
[20150212100006773]: /images/20220805/8549c2ae9bfd41f48a72e17d8867b505.png
[Link 1]: https://github.com/polyfills/variables
[W3C reference]: http://www.w3.org/TR/css-variables/
[MDN info]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
[http_blog.csdn.net_whqet_article_details_43758285]: http://blog.csdn.net/whqet/article/details/43758285
[http_whqet.github.io]: http://whqet.github.io