如果当年的 css 预处理器变量对于初入前端的我来说是开启了新世界的大门，那么 css 变量对于我来说无疑就是晴天霹雳。其功能不但可以优雅的处理之前 js 不好处理或不适合的业务需求。更在创造力无穷的前端开发者手中大放异彩。
基础用法
在前端的领域中，标准的实现总是比社区的约定要慢的多，前端框架最喜欢的 $ 被 Sass 变量用掉了。而最常用的 @ 也被 Less 用掉了。官方为了让 css 变量也能够在 Sass 及 Less 中使用，无奈只能妥协的使用 .
这里我们可以看到针对同一个 css 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。
这与 css 的"层叠"（cascade）规则是一致的。
由于这个原因，全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。
同时， css 变量提供了 JavaScript 与 css 通信的方法。就是利用 js 操作 css 变量。我们可以使用：
我们可以在业务项目中定义以及替换 CSS 变量,大家可以参考 mvp.css。该库大量使用了 CSS 变量并且让你去根据自己需求修改它。
我们可以看到基于 CSS 变量，可以更友好的和设计师的设计意图结合在一起。也易于修改，在业务项目中合理使用无疑可以事半功倍。
实现默认配置
如果让我来思考，我肯定无法想象出结合 CSS 预处理器 + CSS 变量便可以实现组件样式的默认配置。这里我先介绍两个关于该功能的前置知识点:
事实上，CSS 变量的 var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量此前没有定义或者是无效值，就会使用这个默认值。
虽然目前 CSS 变量不是新的属性，但终究不是所有的浏览器都支持 CSS 变量的，这里我们还是要考虑一下优雅降级。
结合 CSS 处理器 + CSS 变量便可以实现组件样式的默认配置。这里参考了有赞的 Vant Weapp 的做法。有赞代码 theme.less 如下所示:
函数效果如下所示:
我们可以看到每调用一次 Less 函数将会被编译成两个属性。第一个属性的设定对于不支持 CSS 变量的设备可以直接使用，如果当前设备支持 CSS 变量，则会使用 CSS 变量，但是由于当前 CSS 变量未定义，就会使用变量的默认值。
虽然 '@button-default-height 虽然也是一个变量，但是该变量仅仅只是 less 变量，最终生成的代码中并没有 --button-default-height 这样的变量。
此时我们就可以在使用样式的位置或者 :root 中添加变量 --button-default-height。
这种方式更适合组件开发，因为该方案不声明任何 css 变量，只是预留的 css 变量名称和默认属性。
这样的话，无论开发者的选择器优先度有多低，代码都可以很容易的覆盖默认属性。因为我们仅仅使用 css 的默认值。
大家可能有时候会想，这样的话，我们不是有更多的代码了吗？其实未必，事实上我们可以直接直接在页面内部定义变量样式。
其他组件直接通过 style 去使用页面内的变量。当然了，事实上书写的代码多少，重点在于想要控制默认样式的粒度大小。
粒度越小，则需要在各个组件内部书写的变量越多，粒度大，我们也就不必考虑太多。
Space Toggle 逻辑切换
CSS 没有逻辑切换似乎是一种共识，但是我们可以利用选框(单选与多选)和 CSS 变量来实现判断逻辑。我们先来看看如何使用 CSS 变量。
解释如下，事实上 -foo: ; 这个变量并不是一个无效值，它是一个空值。initial 才是 CSS 变量的无效值。其实这也可以理解，css 没有所谓的空字符串，空白也不代表着无效，只能使用特定值来表示该变量无效。这个时候，我们再回头来看原来的 CSS 代码。
新式媒体查询
当我们需要开发响应式网站的时候，我们必须要使用媒体查询 @media。先看一下用传统的方式编写这个基本的响应式 CSS：
同样，我们可以利用 css 变量来优化代码结构，我们可以写出这样的代码：
可以看出，第二种 CSS 代码非常清晰，数据和逻辑保持在一个 CSS 规则中，而不是被 @media 切割到多个区块中。这样，不但更容易编写，也更加容易开发者读。
详情可以参考 css-media-vars。该代码库仅仅只有 3kb 大小，但是却是把整个编写代码的风格修改的完全不同。
原理如下所示：
其他
继 CSS 键盘记录器 暴露了 CSS 安全性问题之后，CSS 变量又一次让我看到了玩技术是怎么样的。CSS Space Toggle 技术不但可以应用于上面的功能，甚至还可以编写 UI 库 augmented-ui 以及 扫雷 游戏。
这简直让我眼界大开。在我有限的开发生涯中，很难找到类似于 css 这种设计意图和使用方式差异如此之大的技术。
CSS 是很有趣的，而 CSS 的有趣之处就在于最终呈现出来的技能强弱与你自身的思维方式，创造力是密切相关的。上文只是介绍了 CSS 变量的一些玩法，也许有更多有意思的玩法，不过这就需要大家的创造力了。
