css预处理器和后处理器
使用诸如Sass，LESS和Stylus之类的预处理器始终可以为开发人员提供对其样式表的更多控制权，但是本机CSS逐渐缩小了差距。 CSS功能，例如变量，calc和mixins只是冰山一角； 让我们回顾一下哪些预处理器当前正在为我们提供帮助，以及本机CSS逻辑将如何改变我们的工作方式。
预处理器时代Sass ， LESS和Stylus等语言抽象为开发人员提供了变量，mixin，函数，扩展等等，从而破坏了开发人员的世界。 这些预处理器填补了CSS无法提供的缺失功能。
但是，如果没有智力，就不应再将CSS视为“缺乏逻辑”。 随着CSS不断完善自己，我们已经瞥见了未来-可以与预处理器竞争的未来。
通常，我们将“ mixins”与预处理器（可以在整个项目中重复使用CSS声明组）相关联。 mixin可以用作独立的帮助器，也可以将值作为参数传递以使其更加灵活。
这是一个名为font-size的Sass @mixin示例。
@mixin font-size($size, $base) { font-size: $size; // fallback for old browsers font-size: ($size / $base) * 1rem;}上面的mixin将接受$size和$base ，并在@include声明中使用，并能够根据上下文调整参数。
/* Sass Call */body { @include font-size(14, 16);}/* CSS output */body { font-size: 14px; font-size: 0.875rem;}对于不支持rem浏览器，结果是基于rem的font-size值，而px后退。 多年来，这样的预处理器混合器为开发人员节省了无数的时间。
本机CSS mixin 当前是编辑的草稿 ，但是在Chrome中也可以正常运行 。 如果您已经玩过CSS变量，则以下代码片段将非常熟悉。
:root { --pink-theme: { background: #F64778; }}请注意，上面的代码绝对会使您的语法荧光笔变得更加轻松。 这种编写CSS mixin的方式使用了一个名为@apply的新规则，类似于我们在Sass中将其称为@include 。
body { @apply --pink-theme;}就像我们使用@include熟悉Sass一样，我们最终可以将@apply用于CSS！
您可以在Chrome中通过启用chrome://flags/#enable-experimental-web-platform-features下的标记来自己尝试此实验。
2.做数学还记得预处理器是唯一可以进行数学体操的样式工具吗？ 好吧，现在不再如此了。 使用calc() ，我们可以根据您想要的算法将那些讨厌的数字转换为新值。
nav { margin: calc(1rem - 2px) calc(1rem - 1px);} 这就是calc()的美； 它最终将CSS的功能扩展到了同温层。 更喜欢加法吗？ 减法？ 师？ 乘法？ Calc可以处理所有以及更多的事情。
如果您想了解有关calc()更多信息， 那么W3C规范提供了使您昏昏欲睡和快乐的同时所需的一切。 根据“我可以使用”的说法，浏览器支持也非常可靠。
3.传递变量 CSS的本地变量终于在这里。 对于开发人员来说，它们是一个真实而切实的选择，尽管花了一些时间向预处理器学习。
Sass变量语法如下所示：
$spacing-unit: 20px;main { margin: $spacing-unit; padding: $spacing-unit;}萨斯变量表示以美元$符号，但是在CSS中，他们看起来有点不同：
:root { --primary-color: skyblue;}nav.primary { background: var(--primary-color);}CSS变量用双连字符表示--通常放置在:root以进行全局访问，尽管可以通过将它们放在特定的选择器声明中来加强其范围。
div { color: var(--my-var, red);}如果尚未定义变量，则甚至可以接受后备值，如上面的示例所示。 浏览器支持也不错，Edge显示了部分支持。 该规范也处于候选推荐阶段，以使您的阅读愉快。
4.巢楼嵌套是许多预处理器的功能，它使您可以将选择器放置在现有声明中。 通常，在Sass中嵌套看起来像这样：
ul { margin: 20px auto; li { font-size: 12px; a { text-decoration: none; } }}嵌套会变得笨拙，使您陷入麻烦，导致选择器链过长。 因此，建议遵循“初始规则”并将嵌套深度保持在不超过三或四个级别。
虽然嵌套可能很危险，但是如果您花点时间注意的话，也很方便。 这是它最终如何寻找本机CSS的简要介绍：
/* CSS Nesting */nav { color: #222; &.primary { background: maroon; }}/* Result */nav { color: #222;}nav.primary { background: maroon;}就像我们习惯使用预处理程序盟友一样，本机CSS嵌套为我们提供了相同的原理，但无需编译语言。 Tab Atkins对此原始CSS嵌套功能提供了一份规范草案 。
5.扩展规则“扩展”是传递属性和值并在声明之间共享的另一种方法。 在Sass中，我们已经习惯于应用以下语法：
.message { border: 1px solid #ccc; padding: 10px; color: #333;}.success { @extend .message; border-color: green;}.error { @extend .message; border-color: red;}.warning { @extend .message; border-color: yellow;}您可以看到我们首先定义了.message样式，然后提供了三种具有不同border-colors变体。 每个变体首先扩展 .message ，从而在更改边框颜色之前继承其所有样式规则。
Tab实例起草的示例与上面示例相同的语法是本机CSS的另一种潜在规范。 不管您是否同意扩展（这个特性的好处备受争议），很高兴看到CSS照护者接受预处理器提出的想法。
6.你的本色如果您发现自己使用了预处理器颜色处理功能，则可以在本机CSS中欣赏此功能。 color-mod（）函数采用现有颜色，并应用零个或多个“颜色调整器”，它们指定如何处理最终结果。
nav { background: color-mod(#79d3e2 hue(360) saturation(100%));}开发尚处于早期阶段，尽管有可用的polyfill，但语法经常更改（例如，当前的color-mod以前是color ）。
Tyler Gaw制作了一个非常简洁的工具（ colorme.io ），可让您尝试所有可用的色彩调节器。
目前， CSS工作组正在对color-mod（）函数的规范处于草稿模式 。
总结思想就像jQuery帮助改善网络一样，在CSS方面确实有预处理器。 像Sass这样的语言为CSS规范作者尚未考虑的新思想和方法铺平了道路。
我希望我们已经讨论过的新功能能够启发您在自己的作品中使用它们。 我鼓励您考虑尽可能在预处理器上使用本机功能！
翻译自: https://webdesign.tutsplus.com/tutorials/the-new-css--cms-28888
css预处理器和后处理器