我们可以使用CSS变量吗？

所有谈论最近终于能够使用CSS网格，它引发了我的思考：我可以其他惊人的CSS功能现在用的吗？CSS变量是一个瞬间出现在脑海。
这是自从我听说过CSS变量的任何东西，它增加了一个全新的工具和思维方式对前端开发，让我兴奋了一会儿。
 
在CSS变量复习
CSS变量厮混了几年了但似乎没有广泛使用。随着预处理器如SASS的普及，前端开发，变痒了很久。

我第一次兴奋的CSS变量在2014左右，此后他们浸在我的兴趣范围。我现在只考虑让他们到生产现场，我将向你展示他们是多么简单和容易使用。
 变量声明

声明的自定义属性很简单：我们只需要创造我们想要的属性，它的开始添加两个破折号。这些可以宣布不加入他们 ：根似乎是目前的一个很好的方法。

我的可重复使用的价值：20px；

访问变量

使用属性很简单也。我们访问过var()功能和使用性能，我们声明以上。

填料：VAR（--我的可重复使用的价值）；

这不是简单的光辉？

CSS变量直接使用，很容易记住。用CSS变量最大的挑战（如大多数CSS）是知道正确的时间和地点使用它们。扔在地是一个万无一失的方法来创建一个混乱的样式表，这些变量被调试可能会变得更加困难。

使用适当的使用情况和策略应考虑，这就是你的大部分精力应该集中。

一个有趣的用例 响应模块：

在下面的例子中我将向你展示如何建立基本我目前使用Sass变量响应组件的例子。然后我会告诉你如何可以改进与的方式，是不可能与一个预处理器的CSS变量。这是一个特定的使用情况下，不适用于使用各种方式的变量是如何CSS变量可用于不同。

SASS的例子

看到笔CSS变量–响应用例没有CSS变量由亚当·休斯（“lostmybrain）上CodePen。

当使用SASS有几种不同的方法，我试过。我经常去的版本是将媒体查询在CSS块我想改变。在这里我可以用一个变量，标准的CSS，混合或延长修改该元素没有散射的风格的成分都。

这一问题是有多个媒体查询和一种相关但不是变量很多。我可以使用地图的变量会给更多的组织，但我认为主要的问题是，我们使用一种多变量定义一个属性。这只是感觉不对。

Sass变量用于时间提前，这意味着我们必须计划每一方面我们要使用它们。他们使开发更容易，但技术上没有提供任何新的超级大国。

CSS变量的救援

看到笔CSS–响应变量的使用情况由亚当·休斯（“lostmybrain）上CodePen。

CSS变量不需要申报前，它们是动态的。这是有用的在一个非常不同的方式。我们现在可以有条件地改变变量从任何地方，如媒体查询具体的语境。

通过为我们的媒体查询方式就从我们可以减少媒体查询响应量分散在造型。它还提供了一个很好的清洁方式看，一般间距和字体样式在不同的格式。

我认为敏感的设计主题是CSS变量两个优秀的用例，但有如此多的可能性。

如何不同于Sass变量CSS变量？

Sass变量和CSS变量是不同的两个野兽，各有自己的亲的和反对的。
Sass变量可以有更好的

由于SASS的普及和青菜更多的编程的性质，深入组织模式更随着时间的演变。我特别喜欢萨斯地图结合相似类型的变量到地图。颜色、尺寸和快捷方式的路径似乎是受欢迎的选择，包括地图。

因为CSS变量的最佳实践尚未进化相对较小的用法。地图和阵列不可能以同样的方式，这些新的组织模式，在CSS中要创新，以不同的方式解决问题以萨斯。
CSS变量可以动态改变

CSS变量是通过浏览器在运行时动态处理而非变量时所使用的CSS编写。

这是核心卖点的CSS变量为我。它将看到人们如何使用这个功能，随着时间的推移，是否会辜负其潜在的有趣。

CSS的变量是一个标准的浏览器功能

我个人的意见，更多的事情我们可以去除<em>WebPACK</em>，<em>吞咽</em>，和<em>任何新的框架是现在</em>，更好的。有有趣的新浏览器的特性，意味着我们不需要编译的JavaScript框架做开发商的感觉是必不可少的。我斗胆猜测，前端开发高比例使用变量在CSS的一种或另一种方式，所以每个人都使用这个核心特征似乎是明智之举。这意味着在构建步骤少一点（我想我们都能同意是很巨大的这些天）和整个网络的一致性比较。
支撑着 是什么样的？

支持正在显著好有一个明显的例外：IE 11。大多数现代浏览器支持CSS变量具有一些缺陷边缘。

78.11%这是高比CSS网格（在写作的时候）但是，IE11支持可能是一个问题。

因此，我们可以使用CSS变量吗？

我想现在是时候了。IE11支持，是不会得到任何更好，我们知道从以前版本的Windows，它需要一些人来升级很长时间。但在现代浏览器的支持是伟大的，我们应该寻找的CSS变量和实验的可能性。

这并不意味着我们不应该忘记我们的责任，虽然旧的浏览器支持。使用支持标签基本后备系统，甚至一个polyfill，旧的浏览器应该考虑，即使你的网站实际使用更多的偏向于老的浏览器。