CSS 预处理器是一个非常出色的工具，但是它们的变量是静态的，有语法作用域。Native CSS 变量，从另一面来看，它们是一个完全不同类型的变量：因为它们是动态的，他们的作用域是DOM，事实上，这也是困惑该不该称他们为变量，它们实际上是CSS 属性，这也给了他们一个机会，来解决这个功能完全不同的问题。
在这篇文章中，我将讨论一些CSS 自定义属性这个功能，而且不用CSS 预处理器来做。当然我还演示一些新的设计模式，自定义功能的启用。文章最后讨论一下，我认为在未来最有可能的是预处理变量和自定义变量一起使用，两个东西取长补短，珠联璧合。
预处理器变量的限制
在继续写之前，我想强调的是，我真的很喜欢CSS 预处理器，我的所有项目都在使用它。预处理器做了一件非常了不起的事情，即时你知道他最终出来的就是原始的CSS，任然可以感受这个神器的时代。
任何工具，都有他的局限性，有一个炫酷的外观会让人惊喜而忽略了其中的限制，特别是新用户。
Preprocessor variables aren’t live
也许受预处理限制，在媒体查询中，最常见的新手也无力吐槽定义变量或使用@extend
如果你编译上面的代码，你得到是：
如你所见，媒体查询被废弃，变量赋值被忽略。
从理论上讲，虽然sass 负责申明条件变量，但这样做也是一个挑战，枚举所有Permutations—exponentially 会增加CSS的最终大小。
预处理器变量不能级联（层叠）
每当你使用变量，作用域的范围不可避免，这个变量应该全局吗？应该是file/module？还是块作用域？
CSS 最终是为HTML的样式，事实证明还有另外一种有用的方法是变量的范围：DOM 元素，但是preprocessors不能运行在浏览器且从未看见标记。
参考一个网站，试图给<html> 的元素添加一个 class user-setting-large-text 他们更倾向于更大的文本大小 。
一旦这个class设置，更大$font-size变量赋值就会运用：
