介绍

在写 CSS 时，我们可能会用到 Less、Sass 等预处理，但是这些预处理无法解决下面的问题：

兼容低版本浏览器，对未来的 css 属性进行降级；
前缀补全，例如添加 --webkit；

这些问题，可以使用 PostCSS 进行处理。类似于 babel，PostCSS 用来保证 CSS 的执行万无一失。

babel 的工作流程：

将最新的 ts 语法转化成 js 语法

做一次语法降级

然后再在浏览器中进行执行。

PostCSS 是一个用于处理 CSS 的工具，它采用插件体系，允许开发者通过使用插件来转换、优化和处理 CSS 代码。与传统的预处理器（如 Sass 和 Less）不同，PostCSS 并不是一种新的 CSS 语言，而是通过插件系统扩展了现有的 CSS 语法。

PostCSS 的主要优势之一是灵活性。开发者可以根据项目的需要，选择并配置不同的插件。这使得 PostCSS 成为一个强大的工具，适用于各种不同的项目和需求。

常见的 PostCSS 插件功能有：

自动添加浏览器前缀：使得样式在不同浏览器中具有一致的表现。
CSS 变量处理：允许使用 CSS 变量，并在构建过程中将其转换为实际的值。
压缩和优化：移除不必要的空格、注释等，以减小文件大小并提高加载性能。
使用未来的 CSS 语法：允许开发者在项目中使用尚未被所有浏览器支持的 CSS 语法，通过插件将其转换为当前浏览器能够理解的语法。

postcss-cli 是一个用于运行 PostCSS 的命令行工具。postcss-cli 提供了一种通过命令行界面来使用 PostCSS 的简便方法。使用 postcss-cli，你可以在命令行中运行 PostCSS，并通过指定配置文件或直接传递选项来配置不同的插件和功能。这使得开发者可以轻松地集成 PostCSS 到他们的构建过程中，从而在构建过程中自动化 CSS 处理。

PostCSS 的工作流程通常涉及以下步骤：

安装 PostCSS 及相关插件：通过 npm 或 yarn 安装 PostCSS 以及需要的插件。
配置 PostCSS：创建一个配置文件（通常是 postcss.config.js）来指定使用的插件和其配置。
运行 PostCSS：使用命令行工具（如 postcss-cli）或集成到构建工具中，运行 PostCSS 来处理 CSS 文件。
输出处理后的 CSS：处理后的 CSS 文件可以用于生产环境中。

总的来说，PostCSS 提供了一种现代化、模块化的方式来处理和增强 CSS，为开发者提供了更大的灵活性和控制权。

使用

安装 postcss-cli 和 postcss：

bash 复制代码

yarn add postcss-cli postcss -D

在 index.css 文件中添加下面的内容，使用 CSS 未来语法中的变量：

css 复制代码

:root {
  --globalColor: lightblue;
}

div {
  background-color: var(--globalColor);
}

使用 postcss 对 index.css 进行编译，命令参数：-o表示（output）输出。

bash 复制代码

npx postcss index.css -o result.css

输出的 result.css 文件内容：

css 复制代码

:root {
  --globalColor: lightblue;
}

div {
  background-color: var(--globalColor);
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJyZXN1bHQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiOnJvb3Qge1xyXG4gICAgLS1nbG9iYWxDb2xvcjogbGlnaHRibHVlO1xyXG59XHJcblxyXG5kaXYge1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tZ2xvYmFsQ29sb3IpO1xyXG59Il19 */

此时发现并没有对语法降级。

配置并使用插件

postcss-preset-env为预设环境，他可以帮我们把必要的插件都安装上了，其中包含了：

postcss-low-level：语法降级
postcss-compiler: 编译插件
Autoprefixer: 自动补全

安装 postcss 的插件：postcss-preset-env

csharp 复制代码

yarn add postcss-preset-env -D

PostCSS 的默认配置文件名为：postcss.config.js。创建配置文件 postcss.config.js，并使用 postcss-preset-env插件：

ini 复制代码

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {\
  plugins: [postcssPresetEnv()]
}

再次运行 npx postcss index.css -o result.css对 index.css 文件进行处理，此时 result.css 中的文件内容为：

css 复制代码

:root {
  --globalColor: lightblue;
}

div {
  background-color: lightblue;
  background-color: var(--globalColor);
}

可以发现，已经对语法进行降级了。

另外：PostCSS 中包含 Less 和 Sass 的插件，可以之间使用对应的插件完成 Less 和 Sass 的功能。不过这里两个插件已经不维护了。PostCSS 现在的流程为：先让 Less 和 Sass 处理，然后把处理结果交给 PostCSS 进行处理。所以业内就产生了一个说法：PostCSS 是后处理器，Less 和 Sass 是前处理器。

PostCSS 的介绍和使用

介绍

使用

配置并使用插件