我本来觉得应该从介绍CSS中引入变量的用途开始讲起，但事实上，很多流行的CSS预处理/后处理程序已经做了很好的诠释。当然，手动地去搜索或者查找/替换依然能满足你的需求，但这就像是不在JS中使用变量一样--很痛苦。事实上，CSS变量的动态性和作用域能够为你的实践和应用提供更加强大的能力--你可以非常高效的读取、设置和更新这些变量！同时，就像Webkit的小伙伴们在审查工具中做的那样，你也可以避免在你的代码中出现重复的代码片段（冗余）。

今天要聊的网格系统不是CSS Grid Layout，而要聊的是类似960gs。到止前为止类似于960gs的网格系统成熟的系统有很多套了。

我将从这里说起: 在W3C标准规范中，使用CSS变量并没有任何条件。我认为这是规范文档中的一个很大的缺陷，CSS变量已经实现了很多我们之前无法实现的功能，并且我们未来可能大量使用，缺失文档描述着实让人沮丧。但是如果现在我们需要这些对CSS变量的描述怎么办？好，借助其他的CSS知识，我们可以在一些实例中略窥一二。

变量是CSS预处理器存在的主要原因之一。为某样东西设置变量的能力，比如颜色，在CSS中让变量保持一致，可DRY，并且易于改变是很有用的。出于相同原因，也可以使用原生CSS变量（“CSS自定义属性”）。但有一些重要的差异应该清楚。

几周前，CSS变量，更准确的说是CSS自定义属性——发布在Chrome Canary版的Experimental Web Platform Features flag。Chrome的工程师@Addy Osmani首次在推特发布时，遭遇到了惊人的否定，敌意及怀疑。至少我很吃惊，鉴于我对这个属性是如此兴奋。

CSS自定义属性又称为CSS的变量或者原生变量。其和CSS处理器里的变量还是略有不同，但这篇文章我们要聊的并不是这个东东，咱们想聊聊CSS自定义属性怎么制作动画。

今天，CSS处理器已是Web开发流程中的一个标准。预处理器的主要优点之一就是它们能够使用变量。这可以帮助你避免复制粘贴代码，也简化了开发和重构。我们使用预处理器可以存储颜色、字体和布局等细节——一切我们想使用的CSS都可以。

CSS自定义属性也被称为CSS变量。这是非常令人兴奋的，因为我们在CSS中终于拥有真正的变量。什么意思，真正的变量？我的意思是可以动态更新和修改变量。虽然CSS处理器有了变量（Sass和PostCSS），这些变量通过编译变成了CSS，但没有动态能力更新其变量。这不是真正的CSS变量，只是用来存储和更新可用的值。

大多数编程语言都支持变量。但遗憾的是，CSS从一开始就缺乏对原生变量的支持。如果写CSS的话，那是没有变量的，除非你使用像Sass这样的CSS处理器。变量是Sass这样处理器的一个非常有用的特性之一。这也是你尝试使用的理由之一。Web技术发展是非常快速的。我很高兴地告诉你，CSS现在终于支持原生的变量了。虽然CSS处理器还支持更多的特性，但是CSS添加原生的变量是很好的。这些举措使用Web更接近未来的技术。在这篇文章接下来的内容中，我将向你展示如何在CSS使用变量，以及如何使用它们让你的工作变得更轻松。