postcss入门
正如您将从本系列中的先前文章中所了解的那样，PostCSS就是关于插件的。 您选择的插件将完全定义您对PostCSS的体验。
鉴于它们是如此不可或缺的基础，在我们继续通过PostCSS实际生成样式表之前，我们将看一下如何探索PostCSS插件生态系统。 通过此操作，您还将了解PostCSS的功能强大，以及它如何提供无法通过其他任何现有方式均等创建的功能。
我们将介绍可以去哪里查看最新和最出色的插件，这些插件通常属于的类别以及如何以逻辑方式将所有这些插件加载到项目中的注意事项。
查找插件
当您开始使用PostCSS时，您将需要在三个位置关注寻找出色的插件。
PostCSS Github页面
当前，PostCSS Github存储库的主页上维护着完整的插件分类列表。 此列表的确会经常更新，因此可以很可靠地查看哪些插件可用于开发的不同方面。
目录网站postcss.parts
一个相对较新，也很欢迎，除了PostCSS世界是网站postcss.parts ，它提供PostCSS插件的搜索目录。
@postcss推特
目前，PostCSS会定期发布新的有趣插件。 上面两个位置不会突出显示新插件，因此一眼就不会知道是否有您以前从未见过的项目。 因此，在Twitter上关注或经常访问@PostCSS是一个好主意。
插件类型
可以与PostCSS一起使用的插件功能的广度非常大，因此在尝试试用其中任何插件之前，先介绍一下您可能会遇到的一般类型的插件是一个好主意。
包数
PostCSS的基本性质是它提供模块化CSS处理。 因此，鼓励各个插件仅包含一小部分，定义严格的功能。 不建议同时执行所有操作的超大型多功能插件。
就是说，有时候您确实希望将一长串功能集成到项目中，而不必单独安装和配置二十个不同的插件。 这就是“包装”发挥作用的地方。 软件包将几个模块化插件集中在一起，可以一次安装和部署。
例如， PreCSS包结合了9个独立的PostCSS插件来创建类似Sass的功能。 cssnano包使用大约二十个PostCSS插件来提供CSS缩小和优化。 通过使用这些软件包，您不必手动安装和加载每个插件。
将来CSS语法
将来CSS就是要让您编写W3C规范中即将出现的语法，但浏览器可能尚未完全支持它。
例如，您可能希望能够使用即将到来的八或四位十六进制表示法来创建不透明的颜色。 要生成稍微透明的蓝色，您可以使用#0000ffcc等颜色代码或其缩写形式#00fc ，然后运行postcss-color-hex-alpha插件将其转换为广泛支持的格式rgba(0, 0, 100%, 0.8) 0，0，100 rgba(0, 0, 100%, 0.8) 。
PostCSS未来CSS中最突出的存在是cssnext包，它将大量符合规范的未来CSS带到了桌面。 但是，目前，其开发人员Maxime Therouin正在对其功能进行重大过渡。 因此，我们将竭力为您带来将来CSS教程，直到过渡完成为止。
后备
将来CSS就是要使明天的代码在当今的浏览器中工作，而回退本质上是要使今天的代码在昨天的浏览器中工作。 在一个完美的世界中，我们不必考虑旧的和过时的浏览器，但是现实是，仍然有一些项目必须支持旧版浏览器。 PostCSS插件的后备类别可以帮助解决这种情况。
所有这些插件都是免提运行的，这意味着您要按照当前的标准编写代码，并且这些插件将查找需要遗留后备代码并根据需要自动插入它们。
例如，您可以通过postcss-color-rgba插件将纯色添加为rgba()颜色的后备，也可以通过postcss-opacity插件为opacity添加IE8兼容后备。 这些插件中最著名的是Autoprefixer ，它根据CanIUse.com的数据根据需要添加供应商前缀。
您将在本系列即将发布的“针对跨浏览器兼容性”教程中了解有关后备插件的更多信息。
语言扩展
语言扩展插件为CSS添加了一些其他功能。 相比之下，您可能会认为大多数预处理器完全由语言扩展组成。 实际上，Sass，Stylus和LESS的用户可能会对许多PostCSS语言扩展感到很自在，例如那些添加了mixin，变量，条件，循环，嵌套，扩展等的扩展。
但是，由于PostCSS完全灵活，因此还有一些语言扩展提供了预处理器中不常见的功能。 例如， postcss-bem插件添加了专门用于创建遵循BEM / SUIT方法CSS的语法（在后面的教程中有更多介绍）。 postcss-define-property插件可让您创建自己的自定义属性或重新定义本机属性。 并且postcss-match插件使您不仅可以使用条件，还可以在代码中使用模式匹配逻辑。
有了这种多样性，所有迹象表明PostCSS将会成熟到可以提供我们许多人希望在预处理器中使用的许多功能的能力，但除此之外还可以提供很多功能。
色彩
当前可用于PostCSS的许多颜色插件都将颜色从一种格式转换为另一种格式，例如，从#hex.a为rgba() ，从hcl(H,C,L)为#rgb ，或从pantone转换为#rgb 。 除此之外，一些最有用的插件还可以处理颜色，例如混合两种颜色或缩放它们的明暗度。
我的一个特别喜欢的功能是，您可以采用现有的配色方案，然后输出一个版本，该版本将以特定形式的色盲出现在人们面前。 没有什么比亲身体验可以帮助您评估设计的可访问性更好的了。
我们将在后面的预处理，速记和“杂项”教程中详细介绍颜色插件。
图像和字体
这类插件可处理许多优化任务，例如打包Base64数据，生成CSS Sprite表和SVG优化。 您还将找到其他几种类型的图像和字体工具，例如用于IE8的自动SVG到PNG转换，自动WebP图像生成和包含以支持浏览器， @font-face快捷方式，视网膜支持快捷方式等等。
格网
发现网格系统可以用PostCSS编写，而无需加载预先编写的样式表或使用预处理器混合器，这是使PostCSS多么强大的第一件事。 我以前曾以为PostCSS主要是关于过滤和修改现有CSS的，但是网格系统表明它可以用于创建整个外部样式库。
当前有三种可用于PostCSS的网格系统：
- 失落 ，科里·西蒙斯（Cory Simmons）创建
- postcss-grid ，由Andy Jansson创建
- postcss-neat ，由Jo Asakura创建
最佳化
PostCSS优化插件分为两大类：缩小和代码修改。 通过这些插件，您可以执行诸如删除空格和注释之类的缩小任务，还可以进行更复杂的修改，例如组合匹配的媒体查询，内联@import样式表，优化字体粗细，删除空规则或重复规则等。
在即将发布的“缩小和优化”教程中，我们将详细介绍PostCSS插件。
捷径
作为预处理器用户，我总是发现最大的好处之一就是能够减少我必须使用变量和Mixins编写的代码量。 通过PostCSS，我发现了更广泛的手段，可以通过一长串的快捷方式和速记插件来提高代码编写的效率。
您可以选择对属性使用速记，可以定义自己的速记，也可以使用现有的速记，例如w代替width ， h代替height等等。 您可以输出@font-face代码， transform代码，三角形和圆形，每个都一行。 而且，您可以捷径执行各种常见任务，包括链接样式，居中，明晰固定，定位，调整大小，间距和输出颜色代码。
我们将在“快捷方式和速记”教程中更深入地介绍这些插件。
分析与记者
PostCSS不仅可以用于转换CSS，还可以用于在开发CSS时提供反馈。 一些可用的分析和报告插件包括用于BEM / SUIT代码的linter，通过CSSstats为您提供代码细分的插件，“ DoIUse”以使您知道代码如何与“我可以使用”中的数据对齐，以及Modernizr文件生成器。
其他
有一些很棒的PostCSS插件不太适合特定类别，但是太好了而无法通过。 例如，我们有postcss-style-guide ，它会根据您CSS自动生成样式指南。 还有WordPress使用的rtlcss插件，可生成样式表的从右到左版本。
我们将在教程“其他好东西”中介绍其中一些出色的插件。
好玩
“有趣”类别包括诸如postcss-spiffing之类的宝石，它使您可以使用UK拼写（例如， colour代替color ，以及格式正确的语法（如!please而不是!important 。
您不太可能在实际项目中看到此类别的任何插件，但是它们提供的真正好处是可以作为有抱负的插件开发人员轻松理解的示例。 它们非常简单和简短，非常适合内部查看并了解如何制作PostCSS插件。
插件执行顺序
加载PostCSS插件数组时必须考虑的主要考虑因素之一是运行它们的顺序。 您必须停下来思考一下列表，确定是否可能需要一个插件才能运行另一个插件才能执行您想要的操作。
例如，您可以使用类似postcss-simple-vars的插件来添加对变量的支持，并且可以使用它来存储rgba()值，如下所示：
/* source code */
$color: rgba( 0, 0, 0, 0.5);
.style {
background: $color;
}
/* compiles to: */
.style {
background: rgba( 0, 0, 0, 0.5);
}您可能还想使用类似postcss-color-rgba-fallback的插件来添加一个纯十六进制代码作为后备，从而为您提供：
/* compiles to: */
.style {
background: #000;
background: rgba( 0, 0, 0, 0.5);
}在这种情况下，您必须确保在后备插件之前运行了变量插件。
如果先运行后备插件，它将找到background: $color; 在您CSS中，并且不知道有一个rgba()值可以使用。
但是，通过先运行变量插件，当后备插件运行时，它将找到background: rgba( 0, 0, 0, 0.5); 并添加所需的后备广告。
插件的加载顺序会随每组插件的变化而变化，因此您可能会发现有时只需要做一点试验就可以使所有组件正常工作。
回顾一下
总结探索PostCSS插件：
- 在PostCSS Github存储库和postcss.parts中找到插件
- 请继续关注@PostCSS以了解新的插件
- 插件包允许您一次安装几个类似主题的插件
- PostCSS插件分为许多非常不同的类别
- 加载选择的插件时，请务必考虑它们的执行顺序
在下一个教程中
我们已经完成了PostCSS的“快速入门”指南，并且已经准备好进入实用范围并开始生成一些实际CSS代码。
在下一个教程中，我们将从如何使用PostCSS通过自动插入供应商前缀以及使用旧版浏览器（尤其是IE8）对属性进行大量回退的方式来使用PostCSS生成跨浏览器兼容的代码。
在下一个教程中见！
翻译自: https://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-exploring-plugins--cms-24566
postcss入门