PostCSS：Sass 的新播放日期

最近，PostCSS 是 Web 开发前端的流行工具。

PostCSS 由 Autoprefixer 的创建者 Andrey Sitnik 开发。 它是一个 Node.js 包，作为使用 JavaScript 转换所有 CSS 的工具而开发，从而实现比其他处理器更快的构建时间。

尽管它的名字似乎暗示了什么，但它不是后处理器（也不是预处理器），而是将 PostCSS 特定（或 PostCSS 插件特定，更准确地说）语法转换为香草 CSS。

话虽如此，但这并不意味着 PostCSS 和其他 CSS 处理器不能一起工作。 事实上，如果您是 CSS 预处理/后处理领域的新手，使用 PostCSS 和 Sass 可以为您省去很多麻烦，我们很快就会谈到。

PostCSS 不是其他 CSS 处理器的替代品； 相反，将其视为另一种在需要时可能派上用场的工具，另一种添加到您的工具集中。

PostCSS 的使用最近开始呈指数级增长，今天一些最大的科技行业企业都在使用它，例如 Twitter、JetBrains 和 Wikipedia。 它的广泛采用和成功很大程度上归功于它的模块化。

插件，插件，插件

PostCSS 是关于插件的。

它允许您选择您将使用的插件，放弃不需要的依赖项，并为您提供快速和轻量级的设置，并具有其他预处理器的基本特征。 此外，它还允许您为工作流创建更高度定制的结构，同时保持高效。

截至本文撰写之日，PostCSS 拥有超过 200 个插件的存储库，每个插件负责不同的任务。 在 PostCSS 的 GitHub 存储库中，插件按“解决全球 CSS 问题”、“今天使用未来的 CSS”、“更好的 CSS 可读性”、“图像和字体”、“Linters”和“其他”进行分类。

但是，在插件目录中，您会发现更准确的分类。 我建议您自己看看那里，以更好地了解其中一些功能； 它们相当广泛，相当令人印象深刻。

您可能听说过最流行的 PostCSS 插件 Autoprefixer，它是一个流行的独立库。 第二个最受欢迎的插件是 CSSNext，它允许您使用当今最新的 CSS 语法，例如 CSS 的新自定义属性，而无需担心浏览器支持。

不过，并非所有 PostCSS 插件都如此具有开创性。 有些只是为您提供可能与其他处理器一起开箱即用的功能。 以parent selector为例。 使用 Sass，您可以在安装 Sass 时立即开始使用它。 使用 PostCSS，您需要使用postcss-nested-ancestors插件。 这同样适用于extends或mixins 。

那么，使用 PostCSS 及其插件有什么好处呢？ 答案很简单——你可以选择自己的战斗。 如果您觉得您将要使用的 Sass 的唯一部分是parent selector ，您可以省去在您的环境中实现类似 Sass 库安装以编译您的 CSS 的压力，并通过使用加速该过程只有 PostCSS 和postcss-nested-ancestors插件。

这只是 PostCSS 的一个示例用例，但是一旦您开始亲自检查它，您无疑会意识到它的许多其他用例。

基本 PostCSS 使用

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

让我们考虑一个简单的示例用例。 假设我们想使用 postcss-color-rgba-fallback 插件来为我们所有的 RGBA 格式颜色添加一个备用 HEX 值。

一旦我们 NPM 安装了postcss 、 postcss-cli和postcss-color-rgba-fallback ，我们需要运行以下命令：

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

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

好的，这很容易。 现在，让我们看一个更复杂的例子。

将 PostCSS 与 Task-runners 和 Sass 一起使用

PostCSS 可以很容易地整合到您的工作流程中。 如前所述，它与 Grunt、Gulp 或 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().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

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

它将对所有需要的模块（Gulp、Contact CSS、Sass、PostCSS 和 CSSNext）的引用存储在一系列变量中。

然后，它注册了一个名为stylesheets的新 Gulp 任务。 该任务./src/css/中扩展名为.scss的文件（无论它们在子目录结构中的深度如何），Sass 编译它们，并将它们全部连接到单个all.css文件中。

生成all.css文件后，将其传递给 PostCSS 以将所有 PostCSS（和插件）相关代码转换为实际 CSS，然后将生成的文件放在./dist/css中。

好的，所以使用任务运行器和预处理器设置 PostCSS 很棒，但这是否足以证明首先使用 PostCSS 是合理的？

让我们这样说吧：虽然 Sass 稳定、成熟并且背后有一个庞大的社区，但我们可能希望将 PostCSS 用于像 Autoprefixer 这样的插件。 是的，我们可以使用独立的 Autoprefixer 库，但是使用 Autoprefixer 作为 PostCSS 插件的优点是可以在以后向工作流中添加更多插件，并避免对大量 JavaScript 库的无关依赖。

这种方法还允许我们使用不带前缀的属性，并根据从 API 中获取的值对它们进行前缀，例如 Can I Use 中的值，这是仅使用 Sass 很难实现的。 如果我们试图避免复杂的混入，这可能不是给代码添加前缀的最佳方式，这非常有用。

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

如果您使用的是任务运行器，那么使用 PostCSS 就像在编译您的.sass或.scss文件（或您选择的预处理器的文件）之后将其添加到您当前拥有的任务管道中一样简单。

PostCSS 可以很好地与其他人一起使用，并且可以缓解我们作为开发人员每天遇到的一些主要痛点。

让我们看一下 PostCSS（以及一些插件，如 CSSNext 和 Autoprefixer）和 Sass 一起工作的另一个示例。 你可以有以下代码：

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

这段代码有 vanilla CSS 和 Sass 语法。 截至本文撰写之日，自定义属性仍处于候选推荐 (CR) 状态，这就是 PostCSS 的 CSSNext 插件发挥作用的地方。

这个插件将负责将自定义属性之类的东西变成今天的 CSS。 transform属性也会发生类似的事情，它将由 Autoprefixer 插件自动添加前缀。 之前编写的代码将产生如下结果：

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

PostCSS 的创作插件

如前所述，PostCSS 的一个吸引人的特性是它允许的自定义级别。 由于它的开放性，如果您喜欢编写 JavaScript，那么为 PostCSS 编写您自己的自定义插件来满足您的特定需求是一项相当简单的任务。

PostCSS 的人有一个非常可靠的列表可以开始，如果你对开发插件感兴趣，请查看他们推荐的文章和指南。 如果您觉得需要提出一些问题或讨论任何事情，那么 Gitter 是最好的起点。

PostCSS 的 API 在 Twitter 上拥有相当活跃的粉丝群。 连同本文前面提到的其他社区福利，这就是使插件创建过程如此有趣和如此协作的活动的原因。

因此，要创建 PostCSS 插件，我们需要创建一个 Node.js 模块。 （通常， node_modules/目录中的 PostCSS 插件文件夹前面有一个前缀，如“postcss-”，这是为了明确表示它们是依赖于 PostCSS 的模块。）

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

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

我们将插件命名为replacecolors 。 该插件将查找关键字deepBlackText并将其替换为#2e2e2e HEX 颜色值：

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

前面的代码片段只是做了以下事情：

1. 使用walkRules()它遍历了我们正在处理的当前.css文件中的所有 CSS 规则。
2. 使用walkDecls()它遍历当前.css文件中的所有 CSS 声明。
3. 然后它将声明存储在声明变量中，并检查字符串deepBlackText是否在其中。 如果是，它将替换整个声明为以下 CSS 声明： color: #2e2e2e; .

插件准备好后，我们可以直接从命令行使用它：

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

或者，例如，像这样加载到Guplfile中：

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

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

嗯，这取决于你在寻找什么。

同时使用 Sass 和 PostCSS 是很常见的，因为新手可以更轻松地使用前/后处理器提供的一些开箱即用的工具，以及 PostCSS 插件的功能。 并排使用它们还可以避免使用相对较新且很可能未知的工具重建预定义的工作流程，同时提供一种方法来维护当前依赖于处理器的实现（如Sass mixins 、 extends 、父选择器、占位符选择器、等等）。

给 PostCSS 一个机会

PostCSS 是前端开发世界中的热门（嗯，有点）新事物。 它已被广泛采用，因为它本身不是前置/后置处理器，并且它足够灵活以适应它所插入的环境。

PostCSS 的大部分功能都在于它的插件。 如果您正在寻找的是模块化、灵活性和多样性，那么这就是适合这项工作的工具。

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

许多开发商表示，至少在可预见的未来，它将继续存在。 PostCSS 可以对我们如何构建当今的 CSS 产生巨大影响，这可能会导致前端 Web 开发社区更多地采用标准。