Lately, PostCSS 这个工具在旋转吗 web开发的前端.

PostCSS是由Andrey Sitnik开发的 Autoprefixer. It is a Node.js包开发的工具，以转换所有的CSS使用JavaScript, 从而实现比其他处理器更快的构建时间.

不管它的名字是什么意思, 它不是后处理器(也不是预处理器), 而是一个转译器，将PostCSS特定(或PostCSS插件特定), 更准确地说)语法变成了普通的CSS.

话虽如此，这确实是 not 意味着PostCSS和其他CSS处理器不能一起工作. 事实上是这样的, 如果你是CSS预处理/后处理的新手, 使用PostCSS和Sass可以省去很多麻烦, 我们很快就会讲到.

PostCSS is not a replacement for other CSS processors; rather, 把它看作是在需要的时候可以派上用场的另一个工具, 对工具集的另一个补充.

PostCSS的使用最近开始呈指数增长, 如今，一些最大的科技行业企业都在使用它, like Twitter, JetBrains, 和维基百科. 它的广泛采用和成功很大程度上是由于它的模块化.

插件，插件，插件

PostCSS都是关于插件的.

它允许你选择你要使用的插件, 抛弃不需要的依赖, 并为您提供快速轻量级的设置, 具有其他预处理器的基本特点. Also, 它允许您为您的工作流创建一个高度定制的结构，同时保持其效率.

截至写这篇文章的日期, PostCSS拥有超过200个插件库, 他们每个人负责不同的任务. On the PostCSS的GitHub存储库, 插件按“解决全局CSS问题”分类,“使用未来的CSS。, today,“更好的CSS可读性。,”“图片和字体,” “Linters,和“其他”.”

然而，在 插件目录 你会发现一个更准确的分类. I advise you take a look there yourself to get a better idea of the capabilities of a few of them; they are quite broad and rather impressive.

你可能听说过最流行的PostCSS插件， Autoprefixer，这是一个流行的独立库. 第二个最流行的插件是 CSSNext, 一个插件，可以让你使用最新的CSS语法, 比如CSS的新自定义属性, for example, 不用担心浏览器的支持.

并不是所有的PostCSS插件都是突破性的. 有些只是简单地为您提供了其他处理器可能具备的功能. Take the 父母选择器 for example. 使用Sass，您可以在安装Sass时立即开始使用它. 对于PostCSS，您需要使用 postcss-nested-ancestors plugin. 这同样适用于 extends or mixins.

那么，使用PostCSS和它的插件有什么好处呢? 答案很简单——你可以选择自己的战斗. 如果你觉得萨斯唯一能用的部分就是 父母选择器, 您可以省去在环境中安装Sass库之类的东西来编译CSS的压力, 并且只使用PostCSS和 postcss-nested-ancestors plugin.

That is just one PostCSS的示例用例, 但一旦你开始自己检查, 您无疑会意识到它的许多其他用例.

PostCSS的基本用法

首先，让我们介绍一些PostCSS基础知识，并看看它通常是如何使用的. 与任务运行器一起使用时，PostCSS是非常强大的, 比如Gulp或Grunt, 也可以在命令行中直接使用 postcss-cli.

让我们考虑一个简单的用例. 假设我们想用 postcss-color-rgba-fallback 插件，以便为我们所有的RGBA格式的颜色添加一个回退HEX值.

一旦我们安装了NPM postcss, postcss-cli and postcss-color-rgba-fallback，我们需要运行以下命令:

Postcss——使用Postcss -color-rgba-fallback -o src/css/all.css dist / css /.css

通过这条指令，我们告诉PostCSS使用 postcss-color-rgba-fallback 插件，处理任何CSS是在里面 src/css/all.css，并将其输出到 dist/css/all.css.

好吧，这很简单. 现在，让我们看一个更复杂的例子.

使用PostCSS与任务运行器和Sass

PostCSS可以很容易地整合到你的工作流程中. 正如前面提到的, 它与Grunt等任务运行器完美集成, Gulp, or Webpack, 它甚至可以与NPM脚本一起使用. 一个使用PostCSS与Sass和Gulp的例子就像下面的代码片段一样简单:

Var gulp = require('gulp')，
    Concatcss = require('gulp-concat-css')，
    Sass = require('gulp-sass')，
    Postcss = require('gulp-postcss')，
    Cssnext = require('postcss-cssnext');
    
gulp.Task ('stylesheets'， function () {
  return (
    gulp.src('./ src / css / * * / *.scss')
    .pipe(sass.sync().(“错误”,萨斯.logError))
    .管(concatcss(所有.css'))
    .管(postcss ([
      cssNext()
    ]))
    .pipe(gulp.dest('./dist/css'))
  )
});

让我们解构上面的代码示例.

它存储对所有所需模块的引用(Gulp, Contact CSS, Sass, PostCSS, 和CSSNext)中的一系列变量.

然后，它注册一个新的Gulp任务 stylesheets. 此任务监视中的文件 ./src/css/ 随着扩展 .scss (不管它们在子目录结构中有多深), Sass编译它们, 然后把它们连接成一个 all.css file.

Once the all.css 文件生成, 它被传递给PostCSS，将所有PostCSS(和插件)相关的代码转换为实际的CSS, 然后将结果文件放入 ./dist/css.

OK, 所以用任务运行器和预处理器来设置PostCSS是非常棒的, 但这是否足以证明在一开始就使用PostCSS是合理的呢?

这么说吧，当萨斯稳定的时候, mature, 它背后有一个庞大的社区, 我们可能想使用PostCSS插件，如Autoprefixer, for example. Yes, 我们可以使用独立的autopfix库, 但是使用Autoprefixer作为PostCSS插件的好处是可以在以后的工作流程中添加更多的插件，并避免对一船JavaScript库的不必要依赖.

这种方法还允许我们使用无前缀的属性，并根据从api获取的值为它们添加前缀, 就像从 Can I Use这是仅使用Sass很难实现的. 如果我们试图避免复杂，这是非常有用的 mixins that 可能不是给代码加上前缀的最好方法.

将PostCSS集成到当前工作流中最常见的方法, 如果你已经在使用Sass, 是传递您的 .sass or .scss 通过PostCSS和它的插件. 这将生成另一个具有Sass和PostCSS输出的CSS文件.

如果你使用的是任务运行器, 使用PostCSS就像将它添加到您当前拥有的任务管道一样简单, 在编译你的 .sass or .scss 文件(或选择的预处理器文件).

PostCSS很好地与他人合作, 并且可以缓解我们作为开发人员每天所经历的一些主要痛点.

让我们再看一个PostCSS(以及一些像CSSNext和Autoprefixer这样的插件)和Sass一起工作的例子. 您可以使用以下代码:

:root {
    $ sass-variable: # 000;
    ——自定义属性:# fff;
}

body {
    背景:sass-variable美元;
    颜色:var(——自定义属性);

    &:hover {
        变换:量表(.75);
    }
}

这段代码具有普通的CSS和Sass语法. 自定义属性, 在写这篇文章的那天, 是否仍处于候选人推荐(CR)状态, 这就是PostCSS的CSSNext插件发挥作用的地方.

这个插件将负责把东西，如自定义属性变成 today’s CSS. 类似的事情也会发生在 transform 属性，该属性将由Autoprefixer插件自动添加前缀. 之前编写的代码将会产生如下结果:

body {
    背景:# 000;
    color: #fff;
}

body:hover {
    -webkit-transform:量表(.75);
            变换:量表(.75);
}

为PostCSS编写插件

如前所述，PostCSS的一个吸引人的特性是它允许的定制级别. 由于它的开放性, 如果你擅长编写JavaScript，为PostCSS编写一个自定义插件来满足你的特殊需求是一件相当简单的任务.

PostCSS的人有一个相当可靠的列表可以开始, 如果您对开发插件感兴趣，请查看他们的 推荐文章和指南. 如果你觉得你需要问点什么，或者讨论点什么， Gitter 最好从哪里开始.

PostCSS has its API 有相当活跃的粉丝群 Twitter. 以及这篇文章前面提到的其他社区福利, 这就是为什么插件创建过程如此有趣，并且是一种协作活动.

因此，要创建PostCSS插件，我们需要创建一个Node.js module. (通常，PostCSS插件文件夹在 node_modules / 目录前面有一个前缀，如" postcss- ", 这是使它明确，他们是依赖于PostCSS模块.)

首先，在 index.js 新插件模块的文件, 我们需要包含以下代码, 这将是插件处理代码的包装器:

Var postcss = require('postcss');

module.导出= postcss.Plugin ('replacecolors'， function replacecolors() {
  返回函数(css) {
    //剩下的代码
  }
});

我们给这个插件命名 replacecolors. 插件将查找关键字 deepBlackText 把它换成 #2e2e2e HEX颜色值:

Var postcss = require('postcss');

module.导出= postcss.Plugin ('replacecolors'， function replacecolors() {
  返回函数(css) {
    css.walkRules(函数(规则){
      rule.walkDecls(function(decl, i) {
		Var声明= decl.value;
        如果声明.indexOf(“deepBlackText”) !== -1) {
          声明= ' 颜色:# 2 e2e2e; ';
        }
      });
    });
  }
});

前面的代码片段做了以下工作:

1. Using walkRules() 它遍历当前的所有CSS规则 .css 我们正在浏览的文件.
2. Using walkDecls() 它遍历当前元素中的所有CSS声明 .css file.
3. 然后，它将声明存储在声明变量中，并检查字符串是否 deepBlackText was in it. 如果是，它将替换下面CSS声明的整个声明: 颜色:# 2 e2e2e;.

一旦插件准备好了，我们可以像这样直接从命令行使用它:

Postcss——使用Postcss -replacecolors - 0 src/css/all.css dist / css /.css

或者，例如，加载在 Guplfile like this:

Var replacecolors = require('postcss-replacecolors');

为了使用PostCSS，我应该放弃我当前的CSS处理器吗?

那得看你在找什么了.

Sass和PostCSS同时使用是很常见的, 因为对于新手来说，使用前置/后置处理器提供的一些现成的工具更容易, 以及PostCSS插件的特性. 并排使用它们还可以避免使用相对新的工具重新构建预定义的工作流, 很可能是未知的, tools, 同时提供了一种维护当前处理器相关实现(如 Sass mixins, extends, the 父母选择器, 占位符选择器, and so on).

给PostCSS一个机会

PostCSS是前端开发领域的热门(好吧，有点)新事物. 它已被广泛采用，因为它本身不是前/后处理器, 而且它有足够的灵活性来适应它所处的环境.

PostCSS的强大之处在于它的插件. 如果你想要的是模块化, flexibility, 和多样性, 那么这就是最合适的工具了.

如果您正在使用任务运行器或捆绑器, 那么将PostCSS添加到当前流程中很可能是小菜一碟. 检查安装和使用指南, 您可能会找到一种简单的方法将它与您正在使用的工具集成在一起.

许多开发商表示，至少在可预见的未来，它将继续存在. PostCSS对我们现在的CSS结构有很大的影响, 这可能会导致前端web开发社区更广泛地采用标准.