postcss 插件_7个PostCSS插件使您轻松进入PostCSS

postcss 插件

We’ve featured PostCSS many times before on SitePoint, yet it continues to confuse many. To summarize it in one sentence:

我们精选PostCSS 很多 次 才上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. PostCSS can perform actions on files either before and/or after a pre-processor has compiled its source code to real CSS.

  其名称。 PostCSS可以在预处理器将其源代码编译为真实CSS之前和/或之后对文件执行操作。

• PostCSS could replace your pre-processor. There are plugins which implement constructs such as variables, nesting, mixins and extends.

  PostCSS 可以代替您的预处理器。 有一些插件可实现变量 ， 嵌套 ， mixins和extends等构造。

However, while you can build your own pre-processor, 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？ (How Do You Use PostCSS?)

PostCSS can be used within standalone JavaScript files, Gulp, Grunt, Broccoli, Brunch and a wide range of task runners I’ve never heard of!

PostCSS可以在独立JavaScript文件，Gulp，Grunt，Broccoli，Brunch和许多我从未听说过的任务运行器中使用！

On its own, PostCSS 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.

PostCSS本身不执行任何操作，只是将CSS文件解析为JavaScript对象和令牌。 真正的魔力在于插件，它们可以在编写最终CSS文件之前检查，操作，添加或更改属性和值。

To use PostCSS in Gulp, you need to set-up your project then install both modules:

要在Gulp中使用PostCSS，您需要设置项目，然后安装两个模块：

npm init
npm install --save-dev gulp gulp-postcss

You can then add the plugins you require, e.g. autoprefixer and cssnano:

然后，您可以添加所需的插件，例如autoprefixer和cssnano ：

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 configuration
var gulp = require('gulp'),
    postcss = require('gulp-postcss');

// apply PostCSS plugins
gulp.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插件的方便列表...

1. 自动前缀 (1. Autoprefixer)

If you use nothing else, install Autoprefixer:

如果您什么都不用 ，请安装Autoprefixer ：

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 user-select), sometimes required (e.g. for 3D transformations), or never required (e.g. border-radius).

随着标准得到更好的支持以及供应商选择基于标志的属性启用之类的替代方法，特定于浏览器的前缀(如-webkit- ，- -moz-和-ms-逐渐消失。 不幸的是，您无法避免使用供应商前缀，但是很难知道何时总是需要它们(例如对于用户选择 )，有时是必需的(例如对于3D变换 )还是从不要求(例如border-radius )。

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 caniuse.com 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将在添加必要的前缀之前检查caniuse.com-以下代码指定了任何主流浏览器的后两个版本，或任何超过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插件。

2. PostCSS资产 (2. PostCSS Assets)

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资产可以将随机查询字符串附加到图像引用中，以确保加载了最新文件。

3. cssnext (3. cssnext)

cssnext allows you to use the latest CSS syntax today.

cssnext允许您今天使用最新CSS语法。

npm install --save-dev postcss-cssnext

The plugin has a long list of features including support for:

该插件具有很长的功能列表，其中包括：

• var variables

  var变量

• #rrggbbaa colors

  #rrggbbaa颜色

• Color functions
  颜色功能
• Filters
  筛选器
• Fallbacks
  后备

When it executes, cssnext translates code to a syntax commonly supported in today’s browsers.

执行时，cssnext会将代码转换为当今浏览器通常支持的语法。

4. 背包 (4. Rucksack)

Rucksack offers a range of functions 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 easing functions.

  一组预定义的缓动函数 。

5. Stylelint (5. Stylelint)

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 Improving the Quality of Your CSS with PostCSS walks you through the set up process.

Stylelint根据140条规则报告CSS错误，这些规则旨在捕获常见错误，实施样式约定并实施最佳实践。 有很多选项可以根据您的喜好配置Stylelint — Pavels Jelisejevs的文章“使用PostCSS改善CSS的质量”将引导您完成设置过程。

6. CSS MQPacker (6. CSS MQPacker)

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还提供了用于对媒体查询进行排序和输出源映射的选项。

7. cssnano (7. cssnano)

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是最好的选择之一。 用它！

想要更多？ (Want More?)

A searchable index of PostCSS plugins is available at postcss.parts and the PostCSS usage documentation 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.parts上找到PostCSS插件的可搜索索引，并且PostCSS用法文档提供了推荐选项的列表。 您会发现几乎可以想象到的所有CSS任务的插件，尽管要知道它们之间存在一些交叉和重复-例如，cssnext还包含Autoprefixer。

If that’s not enough, you can develop your own PostCSS plugins in JavaScript. The PostCSS documentation explains how to write a plugin and provides an API reference.

如果这还不够，您可以使用JavaScript开发自己的PostCSS插件。 PostCSS文档说明了如何编写插件，并提供了API参考 。

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开发时间远远超过了最初的安装和配置工作。

翻译自: https://www.sitepoint.com/7-postcss-plugins-to-ease-you-into-postcss/

postcss 插件