PostCSS深入学习: 管理插件

作者：大漠 日期：2015-11-26 点击：3120
PostCSS
PostCSS深入学习
CSS处理器

当你阅读完本系列教程前面的内容，你应该收集了一些PostCSS插件。如何选择PostCSS的插件，这一切取决于你的经验。

鉴于前面的基础，我们来继续了解PostCSS插件的生态系统。通过这个可以了解PostCSS多么强大，以及他能提供哪些功能。

我们将讨论PostCSS插件管理，你可以通过这些去关注最新的PostCSS插件，了解这些插件属于什么类别，考虑如何将这些插件运用到实际的项目中。

查找插件

当你开始进入处理PostCSS插件时，有三个地方需要特别留意，这样你才能找到强大的PostCSS插件。

PostCSS 在Github上的仓库

PostCSS在Github上有一个仓库，其主页维护了插件列表。这个插件列表会经常更新，所以说这个地方是一个相当可靠的地方，可以插件的发展，在哪方面可用。

PostCSS插件

postcss.parts目录网站

一个相对较新而且非常受欢迎的，目前是PostCSS插件提供类目最多的一个网站postcss.parts，而且这个网站还提供搜索功能。

postcss.parts目录网站

@postcss Twitter

现在PostCSS一旦有新的插件就会发布，而上面的两个地方并不能让你一眼就看出。因此，在Twitter上有一个@postcss账号，会随时发布PostCSS的新插件，所以你只需要关注这个账号或者频繁的去访问就可以发现。

@postcss Twitter

插件类型

使用PostCSS插件，其功能是强大的，不过，在介绍这些通用类型的插件之前有可能会遇到一些测试。

Packs

PostCSS的基本性质就是提供了处理CSS的模块。因此，鼓励个人插件只覆盖一组功能。

也就是说，有时想把很多个功能合并到一个项目中，你不需要单独安装和配置不同的插件。这时,packs可以发挥其作用。可以将多个模块插件打包在一起，允许他们安装和部署。

例如，PreCSS包结合了九个独立的PostCSS插件实现类似于Sass功能，cssnano包使用了大约20个PostCSS插件，用来对压缩和优化CSS。通过使用这些包，可以节省你手动安装和加载每个插件。

未来的CSS语法

未来的CSS语法(Future CSS Syntax)是让写的CSS能更符合W3C规范，但可能不是完全的支持浏览器。

例如，您可能希望使用即将到来的八位或四位的hexidecimal符号创建不透明的颜色。你可以使用#0000ffcc（或者缩写的#00fc）来生成一个透明的蓝色，并运行postcss-color-hex-alpha插件转换成rgba(0,0,100%,.8)。

未来CSS语法最突出的PostCSS插件是cssnext,将大量的规范兼容未来的CSS。然而，目前其开发者@Maxime Therouin介绍其功能。因此，一旦其功能包装完成，我们就可以把未来的CSS语法教程推广开。

Fallbacks

未来的CSS语法是为了将明天能工作的代码在今天的浏览器中能工作，而fallbacks本质上是将今天的代码在以前的浏览器上能工作。在完美的世界中我们从没有考虑旧的浏览器和过时的浏览器，但现实是，仍然有一些项目需要兼容旧的浏览器。那么PostCSS中的fallbacks就是来做这件事情的。

所有这些插件运行都是免提(Hands-free)的，我的意思是你编写代码是根据现行的W3C规范，而运行完插件之后发查询你的代码，并根据需要插入对应的代码。

例如，你可以使用postcss-color-rgba给rgba()准备一个后备颜色，或者使用postcss-opacity插件让IE8兼容opacity。而其中最广为人知的插件是Autoprefixer，可以根据CanIUse.com的数据给CSS3属性添加前缀。

你将会在本系列的教程中了解到更多有关于跨浏览器兼容性相关的插件。

语言扩展

语言扩展插件就是添加CSS功能。相比之下，你可能会让为大数预处理器完全是由语言扩展而来。事实上，Sass、Stylus和LESS的用户可能不太会感觉到很多PostCSS语言的扩展，比如说添加mixin，变量，条件，循环，嵌套和扩展等。

因为PostCSS完全是自然灵活的，还有语言扩展提供了预处理器并不常见的功能。例如，postcss-bem插件添加了专门创建CSS的语法，其遵循BEM/SUIT方法（在后面的教程中会详细介绍）。postcss-define-property插件允许您创建自己自定义的属性，或重新定义本地属性。postcss-match插件允许您使用匹配条件的代码。

这一切都表明PostCSS会越来越成熟，它可以提供大家都想要的预处理器的大部分功能之外，还能提供其他强大的功能。

Colors

目前PostCSS提供了许多颜色转换的插件，可以将一种颜色格式转换成另一种，比如#hex.a转换成rgba(),hcl(H,C,L)转换成#rgb或者普通色转换成#rgb。还有一些插件提供颜色功能上的操作，比如说两个颜色混合在一起，修改颜色的亮度或深度得到新颜色等。

其中一个最令人喜欢的就是根据你指定的一个颜色输出一个配色方案。没有什么比帮助你了解如何访问你的设计更重要。

我们将在后面介绍预处理器的篇幅中介绍颜色插件方面的教程。

图片和字体

这一类的插件就是用来处理优化方面的任务，比如说如何生成base64数据,如何生成CSS Sprites和SVG的优化。你还会发现其他一些类型的图像和字体的工具，比如说在IE8下将SVG转换成PNG，自动生成Webp图像格式和@font-face以及Retina下图片等。

网格

发现PostCSS也可以处理网格系统，无需预加载样式和使用预处理器的混合宏(mixin)，让我再一次见识了PostCSS是有多么的强大。我曾以为PostCSS主要是过滤和修改现有的CSS，然而网格系统让我见识了，它可以创建整个网格系统，甚至还可以扩展更强的功能。

目前PostCSS提供了三个强大的网格系统：

优化

PostCSS优化插件主要分为两大类：压缩和代码修改。通过这些插件可以将代码进行压缩，删除掉代码中的空格和注释，更复杂一点的可以修改类似于匹配的媒体查询、@import内联样式，font-weight优化，删除空格和重复的样式等。

我们将在后面的教程中讨论有关于PostCSS 压缩和优化相关插件的教程。

Shortcuts

使用预处理器的用户，能发现其最大的好处就是能够通过使用变量和混合宏减少代码的编写。通过PostCSS我发现，可以使用快捷键或缩写的插件提高代码的编写效率。

你可以选择缩写属性，定义自己喜欢的速记标签，比如使用w代表width，使用h代表height等。您可以输出@font-face、transform、三角形和圆形，而且就只需用一行代码。你还可以使用快捷键快速实现常见的任务，比如link样式、clearfix、position、尺寸大小，间距和颜色代码等。

我们将在后面的教程中详细介绍有关于PostCSS的快捷键和速记相关的教程。

Analysis & Reporters

PostCSS除了可以改变CSS之外还可以反馈CSS的发展。可以用一些数据统计和报告插件，可以用一个变量监测BEM/SUIT的代码、用一个插件统计CSSStats，"DoIUse"让你知道哪些代码来自Can I Use和Modernizr文件生成器。

其他

有一些强大的PostCSS插件不太适合一个特定的类别。例如，postcss-style-guide自动生成一个CSS样式指南。还有rtlcss插件可以在WordPress中生成一个左右排版样式表。

在本教程中我们将讨论类似这样强大的插件。

Fun

Fun类目包括了类似于gem的postcss-spiffing允许你使用英国拼写，比如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插件，给rgba颜色添加一个hexcode备用颜色：

/* compiles to: */
.style {
    background: #000;
    background: rgba( 0, 0, 0, 0.5);
}

在这种情况之下，你必须保证你的变量插件跑在Fallback插件之前。

如果Fallback插件先找到background:$color;，在你的CSS中可能就不知道有一个rgba()值。

然而，先运行变量插件，Fallback插件就能发现background:rgba(0,0,0,.5)并继续添加回退颜色。

插件的加载顺序将改变每组插件，其实你只需要做一个小小的实验就能把一切工作做得很好。

让我们来总结一下

接下来总结一下PostCSS插件：

  • 在Github的PostCSS仓库和postcss.parts可以找到PostCSS插件
  • 请继续关注@postcss账号，可以学习新的PostCSS插件
  • PostCSS插件包允许你将几个类似的功能插件安装在一起
  • PostCSS插件分为很多不同类别
  • 加载多个PostCSS插件时，一定要考虑它们的执行顺序

下一节

我们已经完成了快速学习PostCSS的教程，接下来将在实际项目中使用PostCSS插件。

在接下来的教程中，我们将从如何使用PostCSS生成跨浏览器的前缀和回退到兼容IE8。喜欢PostCSS的同学，欢迎持续关注相关更新。

本文根据@Kezz Bracey的《PostCSS Quickstart Guide: Exploring Plugins》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-exploring-plugins--cms-24566。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：http://www.w3cplus.com/PostCSS/postcss-quickstart-guide-exploring-plugins.html

返回顶部