营销型的网站域名/万秀服务不错的seo推广

CSS预处理是大多数Web开发人员已经学习或了解的概念。 我们已经非常详细地介绍了CSS预处理，以帮助开发人员快速掌握这一流行技术。 但是后处理器呢？

这些相对较新的工具在某种意义上类似，它们会影响Web开发工作流程 ，但是它们在CSS开发的另一端 （“后期”开发）运行。

在本文中，我想介绍后期处理的基础知识 ，它的工作原理，使用原因，并分享一些可用于后期处理CSS游戏的库/工具。

后处理与预处理

当Sass / LESS出现时，发生了预处理革命 。 这些工具允许开发人员在CSS中使用变量，循环，函数和混合。 这几乎使基本CSS开发类似于具有扩展功能的编程语言 。

后处理在您已经生成普通CSS并希望通过自动化进一步扩展后进行 。 这可以包括扩展类选择器或某些CSS属性的自动附加前缀 。

一般来说，预处理具有自己的样式表语言 ，例如Sass和LESS ，它们可以转换为纯CSS 。 后处理采用该基本CSS，并应用自动化/重复 。

这是一则帖子的引文，也是上面图片的来源。 我认为作者Stefan Baumgartner巧妙地总结了这一差异。

从某种意义上说，这两者看起来都像自动化工具，只是以不同的方式工作。 例如，后处理解决的一个常见难题是为新CSS3属性自动添加前缀 。

但这也可以在带有扩展名的Sass中完成。 那么真的有区别吗？ 这是同一篇文章的另一个引文：

尽管从理论上讲可能是正确的，但是Web开发社区仍然在这些工具之间造成了鸿沟。 因此，我强烈建议前端开发人员至少阅读有关后处理器的知识，并了解他们可以做什么。

使后处理适合您的工作流程

几乎每个人都将PostCSS称为后期处理的权威资源。 但是，PostCSS团队已在Twitter上公开承认要更改其标题，因为这种说法已不再有意义。

PostCSS不再只是CSS之前或CSS之后的工具。 它实际上可以在两个方面都起作用 ！ 这进一步解释了先前的说法，即所有CSS工具归结为一件事- 处理 。

PostCSS使用JavaScript插件来自动化CSS工作流程 ，您甚至可以编写自己的JS插件来扩展PostCSS库。 如果您想开始使用PostCSS，请查看Smashing Magazine上的入门教程 。 如果您已经使用并理解Sass，那么您将快速选择Post CSS。

要构建自己CSS前/后处理流程，请首先列出您的痛点 ，例如：

• 自动前缀CSS渐变
• 自动组织CSS规则
• 为某些属性附加polyfill
• 生成背景图像的图像尺寸

请注意，所有这些事情都可以在预处理和后处理中完成 。 重要的是要意识到CSS的前/后处理正在Swift融合，成为一体 。

与其将您的目标分为不同的处理阶段，不如将它们列出为目标 ，然后继续寻找合适的工具 。

最好的后处理工具

我试图避免在本节中提到扩展，因为Sass＆PostCSS有很多选择。 老实说，您可以只使用那些库 ，但是我也想为更具体的解决方案提供一些替代方案 。

如果您已经使用Node.js，那么Pleeease似乎是一个显而易见的选择。 它具有许多典型CSS处理功能 ，例如导入文件，变量/函数，自动最小化以及对新元素（如SVG）的后备支持。

该网站还有一个交互式游乐场，适合希望在线尝试图书馆而无需在本地下载副本的任何人。

我记得Internet Explorer 6还在令人讨厌的时候，很高兴知道IE开发得到了改善-但并没有太大改善。 尽管我很想告诉您IE的使用情况已基本消失，但这似乎并不正确 。

幸运的是， Bless CSS是一种解决方案， 可以检测 CSS中与IE相关的潜在问题 ，并通过后处理创建解决方案。 它运行在Node.js上，因此非常适合典型的NPM / Gulp工作流程。

这是一个非常酷的库，可让您使用当前不支持的更高级功能来构建CSS 。 CSSNext库包含对奇数CSS4函数 （例如gray() 支持 ，这些函数目前仅在W3C草案中提供。

我认为并不是每个开发人员都需要该库。 它非常具体，无法解决日常问题，但是可以在将语法转换为现代CSS3的同时让您领略即将到来CSS4规范 。

如果浏览器支持对您来说是一个问题，那么Stylecow是必要的。 这个功能强大的库允许您仅为自己喜欢的浏览器开发CSS。 然后，您可以通过Node运行命令行工具，并且CSS将针对您要支持的所有浏览器进行更新 。

您可以从GitHub下载Stylecow，它附带一些非常详细的文档 。

-prefix-free

最后，我想共享-prefix-free库，它也是CSS开发最受欢迎的工具，因为它允许您使用未前缀CSS属性 。 每个人都想使用现代CSS属性，例如动画和渐变，但没有人希望手动复制/粘贴详细代码。

使用此插件，您甚至不必通过计算机上的后处理器运行CSS。 它也可以作为浏览器包含在用户计算机上运行，​​以自动更新CSS文件 。

Autoprefixer是PostCSS库的一部分，对于本地后处理而言 ，甚至可能是更好的选择。 这就是为什么我之前说过，如果您同时使用LESS或Sass和PostCSS，那么您将拥有令人印象深刻CSS开发工作流程所需的一切。

结语

尽管后处理确实在CSS工作流程中占有一席之地，但后处理不是真正的技术，而是更多的流行语，因为这些工具极大地增强了现代CSS的编写过程 。 我只能建议开发人员更深入地寻找最适合他们的东西。

如果您正在寻找有关后处理的更多信息，请浏览以下相关文章：

• 什么将使我们从CSS预处理程序的黑暗面中拯救出来？
• 用PostCSS和cssnext编写将来CSS的外观
• CSS预处理（SASS或LESS）与CSS后处理

翻译自: https://www.hongkiat.com/blog/css-post-processors-tips-resources/