PostCSS简介及安装

CSS预处理器很受欢迎，但它们也有一些缺点。在这篇关于PostCSS的介绍中，我们将探讨PostCSS的优势，它是如何工作的，以及它的大量插件可以实现什么。

预处理器的价值和局限性

大多数CSS开发者都熟悉预处理程序。包括Sass、Less和Stylus在内的工具引入了诸如文件参数、嵌套、变量和混合器等概念。一些功能正逐渐出现在本地CSS中，但预处理器对于管理大型代码库和保持风格和编码的一致性仍然很有用。

可能很难想象没有CSS预处理器的生活，但也有缺点。

• 预处理器不能扩展或限制。大多数预处理器是一个黑盒子，为你提供一组特定的支持功能。也许可以编写自定义函数，但超出该工具范围的功能仍然是不可能的--比如内联SVG作为背景图片。

  同样地，你也不能阻止开发者使用你宁愿避免的选项，如@extend 或深度嵌套。提示可以帮助，但它不能阻止预处理器编译一个有效的文件。

• 预处理器提供他们自己的语法。预处理器的代码可能类似于CSS，但没有任何浏览器可以原生解析该文件。语法是不同的，如果你的工具改变或不可用，你的代码将需要更新以使其可用。

这样做的好处远远超过了这些风险，但是有一个替代方案......

什么是PostCSS？

PostCSS不是一个预处理器（尽管它的行为很像）。它是一个Node.js工具，它采用有效的CSS并对其进行增强。即使是那些使用Sass、Less或Stylus的人，也经常在初始CSS编译后运行PostCSS步骤。你可能遇到过PostCSS的自动前缀插件，它可以在需要前缀的CSS属性中自动添加-webkit 、-moz 、-ms 等供应商前缀。

就其本身而言，PostCSS什么都不做。它是一个解析器，对CSS代码进行标记，以创建一个抽象的语法树。一个插件可以处理这个树并相应地更新属性。一旦所有的插件都完成了它们的工作，PostCSS就会将所有的东西重新格式化为一个字符串，并输出到一个CSS文件中。

大约有350个插件可用，大多数都是执行单一的任务，如内联@import 声明，简化calc() 函数，处理图像资产，语法提示，最小化等等。在PostCSS的插件目录中，有一个更方便用户的插件搜索。

PostCSS的好处包括。

• 你可以从标准的CSS开始。PostCSS对CSS的作用就像Babel对JavaScript一样。它可以使用一个在最近的浏览器中有效的标准样式表，并输出在任何地方都有效的CSS--例如，将较新的inset 属性转变成top 、bottom 、left 和right 属性。随着时间的推移，你可以放弃这个过程，因为越来越多的浏览器支持inset 。

  诚然，一些插件允许你解析类似于预处理程序的语法，这不是标准的CSS，但你不一定要使用它们。

• 使用你需要的插件和功能。PostCSS是可配置的，你可以采用你需要的插件。例如，你可以支持参数和嵌套，但不允许变量、循环、混合、地图和其他Sass中的功能。

• 为每个项目提供一个自定义的配置。一个单独的项目配置可以加强或减少其他地方使用的插件集。这些选项远比任何预处理程序要多得多。

• 编写你自己的PostCSS插件。大量的插件可用于扩展语法、解析未来的属性、添加回退、优化代码、处理颜色、图像、字体，甚至可以用其他语言编写CSS，如西班牙语和俄语。

  万一你找不到你需要的东西，你可以用JavaScript编写自己的PostCSS插件。

• 你可能已经在使用PostCSS了。如果你已经在运行一个PostCSS插件，如AutoPrefixer，你可能可以删除你的预处理器依赖。PostCSS不一定比使用预处理器更快、更轻，但它可以在一个步骤中处理所有的CSS处理。

安装PostCSS

PostCSS需要Node.js，但本教程演示了如何从任何文件夹中安装和运行PostCSS--甚至那些不是Node.js的项目。你也可以从webpack、Parcel、Gulp.js和其他工具中使用PostCSS，但我们将坚持使用命令行。

通过运行以下程序在你的系统中全局安装PostCSS。

npm install -g postcss-cli

通过输入这个来确保它的工作。

postcss --help

安装你的第一个PostCSS插件

你至少需要一个插件来做任何实际工作。PostCSS导入插件是一个不错的选择，它可以内联所有的@import 声明并将你的CSS合并到一个文件中。像这样在全球范围内安装它。

npm install -g postcss-import

要测试这个插件，请打开或创建一个新的项目文件夹，如cssproject ，然后为你的源文件创建一个src 子文件夹。创建一个main.css 文件来加载所有的参数。

/* src/main.css */
@import '_reset';
@import '_elements';

然后在同一文件夹中创建一个_reset.css 文件。

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

之后再创建一个_elements.css 文件。

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

从项目的根文件夹中运行PostCSS，通过传递输入的CSS文件、一个插件列表到--use ，以及一个--output 文件名。

postcss ./src/main.css --use postcss-import --output ./styles.css

如果你没有任何错误，下面的代码将被输出到项目根目录下的一个新的styles.css 文件。

/* src/main.css */
/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}
/* src/elements.css */
body {
  font-family: sans-serif;
}
label {
  user-select: none;
}
/* sourceMappingURL=data:application/json;base64,...

注意，PostCSS可以在任何地方输出CSS文件，但输出文件夹必须存在；它不会为你创建文件夹结构。