本文共 9378 字，大约阅读时间需要 31 分钟。
postcss 插件
We’ve featured on SitePoint, yet it continues to confuse many. To summarize it in one sentence:
我们精选 上SitePoint，但它仍然迷惑许多。 用一句话概括一下：
PostCSS handles tedious jobs so you don’t have to.
PostCSS处理繁琐的工作，因此您不必这样做。
It is subtly different to a pre-processor such as Sass, Less and Stylus which provide an alternative, more concise programming language which compiles to CSS. Part of the confusion is caused by:
它与Sass，Less和Stylus之类的预处理器有细微的区别，后者提供了另一种更简洁的编程语言，可以编译为CSS。 造成混淆的部分原因是：
Its name. can perform actions on files either before and/or after a pre-processor has compiled its source code to real CSS.
其名称。 可以在预处理器将其源代码编译为真实CSS之前和/或之后对文件执行操作。
PostCSS could replace your pre-processor. There are plugins which implement constructs such as , , and .
PostCSS 可以代替您的预处理器。 有一些插件可实现 ， ， 和等构造。
However, while you can , there’s little reason to do so unless you want to limit the functionality and increase compilation speed. Personally, I use Sass followed by a sprinkling of PostCSS seasoning to enhance my CSS.
但是，尽管可以 ，但没有什么理由这样做，除非您想限制功能并提高编译速度。 就个人而言，我先使用Sass，再撒上一些PostCSS调味料以增强CSS。
PostCSS can be used within standalone JavaScript files, Gulp, Grunt, Broccoli, Brunch and I’ve never heard of!
PostCSS可以在独立JavaScript文件，Gulp，Grunt，Broccoli，Brunch和我从未听说过的中使用！
On its own, does nothing but parse a CSS file into JavaScript objects and tokens. The real magic happens with plugins which examine, manipulate, add or change properties and values before the final CSS file is written.
本身不执行任何操作，只是将CSS文件解析为JavaScript对象和令牌。 真正的魔力在于插件，它们可以在编写最终CSS文件之前检查，操作，添加或更改属性和值。
To use PostCSS in Gulp, you need to set-up your project then install both modules:
要在Gulp中使用PostCSS，您需要设置项目，然后安装两个模块：
npm initnpm install --save-dev gulp gulp-postcss
You can then add the plugins you require, e.g. and :
然后，您可以添加所需的插件，例如和 ：
npm install --save-dev autoprefixer cssnano
A gulpfile.js can be created. It defines a task which loads the CSS source and pipes it through PostCSS. Plugins and any required options are passed to PostCSS in an array. Finally, the CSS is output to a destination file:
可以创建gulpfile.js 。 它定义了一个加载CSS源并将其通过PostCSS传递的任务。 插件和所有必需的选项以数组形式传递到PostCSS。 最后，CSS输出到目标文件：
// Gulp.js configurationvar gulp = require('gulp'), postcss = require('gulp-postcss');// apply PostCSS pluginsgulp.task('css', function() { return gulp.src('src/main.css') .pipe(postcss([ require('autoprefixer')({}), require('cssnano') ])) .pipe(gulp.dest('dest/main.css'));}); The task can be run from the console with:
可以使用以下命令从控制台运行任务：
gulp css
All we need now is a handy list of PostCSS plugins…
现在我们需要的只是PostCSS插件的方便列表...
If you use nothing else, install :
如果您什么都 ，请安装 ：
npm install --save-dev autoprefixer
Browser-specific prefixes such as -webkit-, -moz- and -ms- are gradually dying out as standards become better supported and vendors opt for alternatives such as flag-based property enabling. Unfortunately, you cannot avoid vendor prefixes but it’s difficult to know when they’re always required, (e.g. for ), sometimes required (e.g. for ), or never required (e.g. ).
随着标准得到更好的支持以及供应商选择基于标志的属性启用之类的替代方法，特定于浏览器的前缀(如-webkit- ，- -moz-和-ms-逐渐消失。 不幸的是，您无法避免使用供应商前缀，但是很难知道何时总是需要它们(例如对于 )，有时是必需的(例如对于 )还是从不要求(例如 )。
You need never worry about prefixing again with Autoprefixer. You just need to define non-prefixed CSS, then state which browsers you want to support. Autoprefixer will check before adding the necessary prefixes — the following code specifies the last two versions of any mainstream browser, or any exceeding 2% market share:
您无需担心会再次使用Autoprefixer作为前缀。 您只需要定义非前缀CSS，然后声明您要支持的浏览器。 Autoprefixer将在添加必要的前缀之前检查以下代码指定了任何主流浏览器的后两个版本，或任何超过2％的市场份额：
.pipe(postcss([ require('autoprefixer')({ browsers: ['last 2 versions', '> 2%'] })])) This is a superior option to pre-processor library functions which normally require special coding and apply vendor prefixes regardless. Your prefixed code will be removed in future PostCSS runs as browser standards evolve.
对于通常需要特殊编码并使用供应商前缀的预处理器库函数而言，这是一个很好的选择。 随着浏览器标准的发展，您的前缀代码将在以后的PostCSS运行中被删除。
Autoprefixer is so useful and widespread, it is possible you’re already using without realizing it is a PostCSS plugin.
Autoprefixer非常有用且广泛使用，可能您已经在使用而没有意识到它是PostCSS插件。
PostCSS Assets provides a number of useful image-handling functions:
PostCSS资产提供了许多有用的图像处理功能：
npm install --save-dev postcss-assets
The options include:
选项包括：
URL resolution: Given a file name, PostCSS Assets replaces resolve(image) with a root path or fully-qualified URL.
URL解析：给定文件名，PostCSS Assets用根路径或完全限定的URL替换resolve(image) 。
Dimension handling: PostCSS Assets replaces references to width(image), height(image) or size(image) with a pixel equivalent.
尺寸处理： PostCSS Assets用等效的像素替换对width(image) ， height(image)或size(image)引用。
Image inlining: PostCSS Assets replaces inline(image) with a Base64-encoded string.
图像内联： PostCSS Assets用Base64编码的字符串替换inline(image) 。
Cache-busting: PostCSS Assets can append a random query string to an image reference to ensure the latest file is loaded.
缓存清除： PostCSS资产可以将随机查询字符串附加到图像引用中，以确保加载了最新文件。
cssnext allows you to use the latest CSS syntax today.
cssnext允许您今天使用最新CSS语法。
npm install --save-dev postcss-cssnext
The plugin has a including support for:
该插件具有很其中包括：
var variables
var变量
#rrggbbaa colors
#rrggbbaa颜色
When it executes, cssnext translates code to a syntax commonly supported in today’s browsers.
执行时，cssnext会将代码转换为当今浏览器通常支持的语法。
Rucksack offers a which, the developer claims, makes CSS development fun again!
开发人员声称，背包提供了 ，这些再次使CSS开发变得有趣！
npm install --save-dev rucksack-css
Options include:
选项包括：
Responsive typography which adjusts font sizes and line heights with a single font-size: responsive declaration.
响应式排版，可使用单个font-size: responsive调整字体大小和行高font-size: responsive声明。
Quantity pseudo-selectors such as li:at-least(4) which targets any list with four or more items.
数量伪选择器，例如li:at-least(4) ，它针对具有四个或更多项目的任何列表。
Property aliases such as defining bg as background which can be used throughout your CSS.
属性别名，例如将bg定义为background ，可以在整个CSS中使用。
A set of pre-defined .
一组预定义的 。
Stylelint reports CSS errors based on 140 rules designed to catch common mistakes, implement style conventions and enforce best practices. There are many options to configure Stylelint to your liking — Pavels Jelisejevs’ article walks you through the set up process.
Stylelint根据140条规则报告CSS错误，这些规则旨在捕获常见错误，实施样式约定并实施最佳实践。 有很多选项可以根据您的喜好配置Stylelint — Pavels Jelisejevs的文章引导您完成设置过程。
MQPacker optimizes your media queries into single rules when possible:
MQPacker尽可能将您的媒体查询优化为单个规则：
npm install --save-dev css-mqpacker
Pre-processors such as Sass make it easy to use media queries within a declaration, e.g.
诸如Sass之类的预处理器使在声明中轻松使用媒体查询变得容易，例如
.widget1 { width: 100%; @media (min-width: 30em) { width: 50%; } @media (min-width: 60em) { width: 25%; }}.widget2 { width: 100px; @media (min-width: 30em) { width: 200px; }} This compiles to:
编译为：
.widget1 { width: 100%; }@media (min-width: 30em) { .widget1 { width: 50%; }}@media (min-width: 60em) { .widget1 { width: 25%; }}.widget2 { width: 100px; }@media (min-width: 30em) { .widget2 { width: 200px; }} To reduce file sizes and (possibly) improve parsing times, MQPacker packs multiple declarations into one @media rule, i.e.
为了减小文件大小并(可能)缩短解析时间，MQPacker将多个声明打包到一个@media规则中，即
.widget1 { width: 100%; }.widget2 { width: 100px; }@media (min-width: 30em) { .widget1 { width: 50%; } .widget2 { width: 200px; }}@media (min-width: 60em) { .widget1 { width: 25%; }} Hot tip: ensure the first media query declaration in your code defines all possible options in the order you want them even if there’s no actual difference. This guarantees MQPacker will define rules in the correct order.
热点提示 ：即使代码没有实际差异，也请确保代码中的第一个媒体查询声明按所需顺序定义了所有可能的选项。 这保证了MQPacker将以正确的顺序定义规则。
MQPacker also provides options for sorting media queries and outputting source maps.
MQPacker还提供了用于对媒体查询进行排序和输出源映射的选项。
cssnano compacts your CSS file to ensure the download is as small as possible in your production environment. Install it via:
cssnano会压缩您CSS文件，以确保下载在您的生产环境中尽可能小。 通过以下方式安装：
npm install --save-dev cssnano
The plugin works by removing comments, whitespace, duplicate rules, outdated vendor prefixes and making other optimizations to typically save at least 50%. There are alternative options but cssnano is one of the best. Use it!
该插件的工作原理是删除注释，空格，重复的规则，过时的供应商前缀，并进行其他优化以节省至少50％的时间。 还有其他选择，但是cssnano是最好的选择之一。 用它！
A searchable index of PostCSS plugins is available at and the provides a list of recommended options. You’ll find plugins for almost any CSS task you can imagine although be aware there is some cross-over and duplication — for example, cssnext also includes Autoprefixer.
可在上找到PostCSS插件的可搜索索引，并且提供了推荐选项的列表。 您会发现几乎可以想象到的所有CSS任务的插件，尽管要知道它们之间存在一些交叉和重复-例如，cssnext还包含Autoprefixer。
If that’s not enough, you can develop your own PostCSS plugins in JavaScript. The PostCSS documentation explains and provides an .
如果这还不够，您可以使用JavaScript开发自己的PostCSS插件。 PostCSS文档说明了并提供了 。
PostCSS makes CSS development easier regardless of whether you use a pre-processor. The CSS development time it saves more than outweighs the initial installation and configuration effort.
无论您是否使用预处理器，PostCSS都使CSS开发更加容易。 它节省CSS开发时间远远超过了最初的安装和配置工作。
翻译自:
postcss 插件
转载地址：http://zurgb.baihongyu.com/