注：本文首发于个人博客 《CSS Variables学习笔记》。
最近看了下CSS Variables（CSS变量，又名CSS自定义属性），跟大家分享一下我的学习笔记。
一、什么是CSS Variables
来，直接看MDN上的描述：
CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 var() 来访问。
color: var(--main-color);二、学习笔记
1. 声明 & 调用
i. 声明方式
CSS变量声明的方式非常简单，如下，声明了一个名叫color的CSS变量。
- 在css文件中写
- 写在html标签的inline-style里
- 用JS给某个元素声明，方法
.style.setProperty
body{
--color: red;
}<body style="--color: red;"></body>document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')ii. 调用方式
通过var()函数调用，如：
.block{
color: var(--color);
}iii. 变量的命名
说完声明和调用，还有个小问题。那么，CSS变量的命名，有什么限制么？下面我们来测试一下。
.foo-test{
--foo:;
--ffoo:;
--Foo: red;
--FOo: blue;
--FOO: green;
/* 以下省略测试className的代码 */
}
从以上测试代码可以看出：
- CSS变量的命名是大小写敏感的
- 不赋值或者赋值空格，都是无效的
2. 作用域 & 继承
CSS变量也有作用域一说，而最顶层的作用域就是:root，下面的所有的元素都可以共享相关CSS变量。
:root{
--color: green;
}刚才我们在body上，定义了--color，在body下的子元素，都会默认继承这个属性，随意使用。当然也可以重载，把--color定义为别的值。
<div class="block">
<p>inherit color</p>
<p class="css-var-text">overwrite color - hello world</p>
</div>body{
--color: green;
}
.block{
color: var(--color);
}
.css-var-text{
--color: red;
color: var(--color);
}.block，作为body的子元素，继承了--color属性，所以边框出来就是green。
而.css-var-text在自己的作用域中，重写了--color，出来的字体颜色是overwrite后的blue。
3. 浏览器支持
i. 浏览器支持现状
来看看caniuse上CSS Variables (Custom Properties)的支持度：
PC的话，IE 11和Edge的支持度都很差，而Chrome（2016.3）、Firefox（2017.11）和Safari(2017.3)的一些新版本都是支持的，相信很快就能普及。
Mobile的话，Safari在2016年的版本已经支持CSS变量了，但Opera、Chrome、UC等的支持还不太好。
ii. fallbacks
浏览器的支持度不太好，我们又想玩新东西的话，就需要考虑如果浏览器不支持CSS变量，怎么优雅降级。（嗷，两套代码是有点……）
/* 当浏览器不支持CSS变量 */
.browser-support{
background: red;
}
/* 当浏览器支持CSS变量 */
@supports (--css: variables) {
.browser-support{
background: var(--color);
}
}三、代码习作
1. codepen
在学习CSS Variables的时候，有边写一些教程的demo，除了以上，还包括一些实际场景的应用，如像box-shadow复合属性的拆解，以及JS操作CSS变量等。
CSS Varibles Study Notes on Codepen.io.
2. flexbox属性的DEMO
之前在团队也做过一下下flexbox的分享，大家也知道，flex属性和对应的值特别多，当时就很想做个可以随时变属性值看效果的playground。
但想了下传统的实现方式，貌似没有优雅的方法。
- CSS+JS实现：写一批classname，option切换时，通过JS修改classname改变样式；
- 纯JS实现，根据option的value用JS改写元素的inline style（一直修改dom）
哎哟，换CSS Variables之后，一切就不一样了，可继承、可复用、易维护，目前实现比较简单，可能跟以上的传统方式差别不太大，不过后续要修改或者做更多优化，我相信优势就会凸显出来了。
demo传送门：wuyuying.com/flexbox-css-var
小结
哈哈，没想到小结写什么，如果大家有好玩的CSS Variables的应用，欢迎分享给我 ：）
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。