CSS 预解决器是1个十分优异的专用工具，可是它们的自变量是静态数据的，有英语的语法功效域。Native CSS 自变量，从另外一面看来，它们是1个彻底不一样种类的自变量：由于它们是动态性的，她们的功效域是DOM，客观事实上，这也是疑惑该不应该称她们为自变量，它们具体上是CSS 特性，这也给了她们1个机遇，来处理这个作用彻底不一样的难题。
在这篇文章内容中，我将探讨1些CSS 自定特性这个作用，并且无需CSS 预解决器来做。自然我还演试1些新的设计方案方式，自定作用的开启。文章内容最终探讨1下，我觉得在将来最有将会的是预解决自变量和自定自变量1起应用，两个物品扬长补短，鸾凤和鸣。
预解决器自变量的限定
在再次写以前，我想强调的是，我真的很喜爱CSS 预解决器，我的全部新项目都在应用它。预解决器做了1件十分伟大的事儿，及时你了解他最后出来的便是初始的CSS，任然能够体会这个神器的时期。
任何专用工具，都有他的局限性，有1个酷炫的外型会令人欣喜而忽视了在其中的限定，非常是新客户。
Preprocessor variables aren’t live
或许受预解决限定，在新闻媒体查寻中，最多见的初学者也无力调侃界定自变量或应用@extend
假如你编译程序上面的编码，你获得是：
如你所见，新闻媒体查寻被废料，自变量取值被忽视。
从基础理论上讲，尽管sass 负责声明标准自变量，但这样做也是1个挑戰，枚举类型全部Permutations—exponentially 会提升CSS的最后尺寸。
预解决器自变量不可以联级（堆叠）
每当你应用自变量，功效域的范畴不能防止，这个自变量应当全局性吗？应当是file/module？還是块功效域？
CSS 最后是为HTML的款式，客观事实证实也有此外1种有效的方式是自变量的范畴：DOM 元素，可是preprocessors不可以运作在访问器且从未看见标识。
参照1个网站，尝试给<html> 的元素加上1个 class user-setting-large-text 她们更趋向于更大的文字尺寸 。
1旦这个class设定，更大$font-size自变量取值就会应用：
可是，就像上面新闻媒体查寻事例，Sass 立即忽视自变量取值， 代表着这类事是不能能的。他輸出的：
预解决器自变量不承继
尽管承继是联级的1一部分，可是我還是要提1下，由于许多次我想应用这个作用都未能用成。
有1种状况，你有Dom元素在色调设计风格基本上有甚么的转变情况下，你能够用在她们的父元素上。
上面的Sass编码是失效的，但你应当能了解这编码尝试要进行甚么。
它最终尝试应用sass的darken涵数用在background-color特性，但button元素承继它的父class元素.alert。假如class info或error早已加上到alert（或根据JavaScript设定情况色调或客户款式），按钮元素期待可以获得这两个色调。
如今这个尽管不容易在sass 运作，由于预解决器不知道道DOM构造，但還是期待弄清楚这种类的物品将会有哪些用途。
说1个特殊的测试用例：这也是在承继DOM特性的可浏览性运作color 涵数的缘故。举个栗子，以便保证文字一直可读，且充足与情况色调产生独特比照。根据自定特性和新的CSS Color涵数，这将很快变成将会！
预解决器自变量不可以互相合作
这是1个显著呈降低发展趋势的预解决器，假如你用PostCSS 创建1个网站，你想应用第3方组件，不太好意思，你仅有根据Sass的themeable。
与第3方共享预解决器自变量在不一样的专用工具集成化或第3方代管的CND款式与都十分艰难（最少不可易）。
当地CSS自定特性将与任何CSS预解决或原CSS恰好相反。
自定特性有为何不同
你将会早已猜到了，我上面列出的可用于CSS 自定特性沒有任何限定，但或许更关键的并不是说她们不可用，而是为何她们无需。
CSS自定特性就像基本的CSS特性1样，她们的实际操作方法彻底同样。
像一般的CSS特性，自定特性是动态性的，她们能够在运作时改动，还可以在新闻媒体查寻时根据变更DOM加上1个新类，另外还可以分派内联元素和1个基本CSS里声明挑选器。还能够根据一切正常的cascade标准或应用JavaScript遮盖。最关键的是，她们的能够承继的，因此当她们运用到DOM元素的情况下，她们的子元素也会承继特性。
以便更简约，预解决器自变量是英语的语法功效域和编译程序后静态数据。自定特性功效域是DOM，她们都很灵便。
具体实例
假如你依然不确定性自定特性能够保证这1点，而预解决器不好，我这里给1些事例。
无论真伪，有很多十分好的事例我都很想展现，但以便不让这篇文章内容太丑，我选了两个。
我挑选这些事例不仅由于它们的基础理论，它们也是大家以往具体遭遇的挑戰，我仍然记得尝试用预解决器，但这是不能能的。如今好了，立即自定特性走起。
新闻媒体查寻的回应式特点
许多网站在新项目合理布局应用“gap”和“gutter” 界定默认设置间隔和填充网页页面各个一部分，许多情况下，你要想这个“gutter”的值依据访问器对话框的尺寸而不一样。在大显示屏上你要想每项之间有充足的室内空间，但小显示屏又压力不起那末大的室内空间，因此“gutter”的值要较小。
正如我上面提到的，在新闻媒体查寻里边Sass 不可以一切正常运作，因此你务必每一个独立解决。
下面的事例界定了自变量$gutterSm, $gutterMd和$gutterLg，随后给每一个自变量声明1个独立的标准：
应用自定特性来进行同样的物品，你只必须界定款式便可。你可使用1个 gutter 特性，随后伴随着新闻媒体查寻的转变，升级gutter 的值，它就会做出相应的转变。
尽管有附加提升的自定特性英语的语法，可是相比冗杂的编码进行一样的事显著好许多。这里只考虑到了3个自变量，假如自变量越多，这将节约更多的编码。
下面的演试应用的是上面的编码全自动搭建的1个基础的网站合理布局，gutter的值追随对话框的转变而转变，访问器的适用自定特性的话，实际效果屌屌的！
语境款式
语境款式（款式元素依据它出現在Dom）在CSS里是1个有争议的话题。 1层面，它是最受人尊重的CSS开发设计者警示，另外一层面，大多数数人每日都还要用它。
下面事例显示信息了绝大多数人在CSS应用语境款式方式，应用子代挑选器
这类方式有许多难题，这类方式1个编码味儿，它违背了 open/closed 手机软件开发设计标准；改动了1个封闭式组件的完成细节
手机软件体 (类, 控制模块, 涵数等) 拓展对外开放, 对改动关掉。
自定特性的更改范畴式界定组件是1个趣味的方法，用自定特性，大家能够在第1次就写1个具体上是对外开放拓展的组件，这里有1个事例：
这和子挑选器之间的差别很彼此之间并且很关键。
当应用子挑选器大家宣传策划在页眉按钮会这样，这样不一样的按钮怎样界定自身，这样的申明是专权（借Harry’s 的词），很难撤消列外的状况，页眉的1个按钮不必须这样的方法。
此外，自定特性，按钮组件还是沒有语境且不可以彻底与header 组件解耦，
按钮组件简易的说声明：不管它们现况怎样，我要自身的设计风格根据这些自定特性；
header 组件：我要设定这些特性值，由我的子代来明确和怎样应用它们。
关键的差别是，该拓展由按钮组件挑选，并随便清除列外状况。
下面的演试表明了语境款式的连接和按钮在网站的题目及內容区
建立列外
假如像.promo的组件加到header，随后buttons又加到.promo 里边，使其看起来像1个一切正常按钮，而并不是题目按钮。
假如你用子代挑选器，那你即将给header buttons写1大串款式，并且还不可以危害promo buttons，错乱，非常容易错误，并且非常容易失控的数量会提升：
跟React学
当我第1次探寻自定特性语境款式的情况下，我很怀疑自身。像前面说的，我趋向于喜爱组件自身界定自身的转变，而并不是任何特性都承继自父元素。
可是有1件事，松懈了我在CSS自定特性的见解，那便是React的props 的
React的props仍然是动态性的，DOM-scoped variables，她们承继，容许组件左右文关系，在React，父组件将数据信息传送给子组件，随后子组件界定props，她们想要接纳和应用它们。这类工程建筑实体模型一般被称为one-way data flow。
虽然自定组件是全新升级的未检测的行业，我觉得React model 给了取得成功的自信心，1个繁杂的系统软件能够创建在特性承继——另外，DOM-scoped variables 是1个十分有效的设计方案方式。
最大程度的降低不良反应
CSS 自定特性承继默认设置，在一些状况下，这致使组件的款式将会沒有做到她们的预期。
在文章内容上1节中，我提到能够重设单独特性，这能够避免未知值被运用到元素的子元素：
虽然这并不是标准的1一部分，——正在探讨特性附[2]，这个能够用来重设全部自定特性，假如你想白名单几个特性，你能够将她们独立承继，别的的一切正常便可：
管理方法全局性names
假如你1直关心自定特性，那你将会早已留意到自身带有components-specific前缀的组件，如--Button-backgroundColor.
与CSS 大多数数姓名1样，自定特性是全局性，很是有将会将正在应用取名与别的开发设计精英团队的名字造成矛盾。
有1个简易的方式能够防止这个难题，便是坚持不懈取名承诺，我如今精英团队便是这么做的。
针对更繁杂的新项目，你能够考虑到像CSS控制模块 localifies全部全局性名字，并且她们近期也表明有兴趣爱好适用自定特性。
完毕语
假如你在阅读文章这篇文章内容以前，不熟习CSS 自定特性，我期待你能给他1个机遇。假如你还在怀疑他的必要性，期待我能更改你的念头。
我敢毫无疑问，自定特性能给CSS带来1系列的强劲的作用和外貌，它也有更多的优点等候大家去发现。
自定特性preprocessor 自变量是没法取代的。虽然这般，preprocessor variables 依然是很多状况下的不2挑选。正因这般，我确信将来许多网站都会融合应用2者。
自定特性为动态性主题和预解决器自变量静态数据模版。
我不觉得这是2选1的状况，让她们互相市场竞争，就像对手1样损害每本人。