进阶：玩转 CSS 变量

如果当年的 CSS  预处理器变量对于初入前端的我来说是开启了新世界的大门，那么 CSS 变量对于我来说无疑就是晴天霹雳。其功能不但可以优雅的处理之前 js 不好处理或不适合的业务需求。更在创造力无穷的前端开发者手中大放异彩。

基础用法

在前端的领域中，标准的实现总是比社区的约定要慢的多，前端框架最喜欢这里我们可以看到针对同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。由于这个原因，全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。同时， CSS 变量提供了 JavaScript 与 CSS 通信的方法。就是利用 js 操作 css 变量。

我们可以在业务项目中定义以及替换 CSS 变量,大家可以参考mvp.css[1]。该库大量使用了 CSS 变量并且让你去根据自己需求修改它。我们可以看到基于 CSS 变量，可以更友好的和设计师的设计意图结合在一起。也易于修改，在业务项目中合理使用无疑可以事半功倍。

实现默认配置

如果让我来思考，我肯定无法想象出结合 CSS 预处理器 + CSS 变量便可以实现组件样式的默认配置。这里我先介绍两个关于该功能的前置知识点:

事实上，CSS 变量的 var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量此前没有定义或者是无效值，就会使用这个默认值。

其他

继 CSS 键盘记录器[6] 暴露了 CSS 安全性问题之后，CSS 变量又一次让我看到了玩技术是怎么样的。CSS Space Toggle 技术不但可以应用于上面的功能，甚至还可以编写 UI 库 augmented-ui[7] 以及  扫雷[8] 游戏。这简直让我眼界大开。在我有限的流量交易开发生涯中，很难找到类似于 css 这种设计意图和使用方式差异如此之大的技术。

CSS 是很有趣的，而 CSS 的有趣之处就在于最终呈现出来的技能强弱与你自身的思维方式，创造力是密切相关的。上文只是介绍了 CSS 变量的一些玩法，也许有更多有意思的玩法，不过这就需要大家的创造力了。