PostCSS - 掘金

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

PostCSS（后预处理器）是一种使用 JS 插件转换样式的工具。这些插件可以 lint 你的 CSS，支持变量和 mixins，转换未来的 CSS 语法，内联图像等。

与其他 CSS 预处理器有何不同？

PostCSS 相比 Sass 或 Less 等 CSS 预处理器提供的主要好处是能够选择自己的路径，并选择所需的功能，同时添加新功能。Sass 或 Less 是固定的，您可以获得许多您可能使用或不使用的功能，但您无法扩展它们。

你完全可以使用 PostCSS 代替 Sass 或 Less，但如果你不喜欢，您仍然可以使用 Sass 或 Less，并使用 PostCSS 执行 Sass 无法执行的其他操作，如自动刷新或 linting。

你可以编写自己的 PostCSS 插件来做任何你想做的事情。

pnpm i -g postcss-cli

输入以下命令确保其正常工作：

postcss --help

Autoprefixer 解析 CSS 并确定某些规则是否需要供应商前缀。

它根据 Can I Use 数据执行此操作，因此您不必担心某个功能是否需要前缀，或者您使用的前缀是否因为过时而不再需要。

你可以写出更简洁的 CSS。

例子：

a {
  display: flex;
}

被编译为：

a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

PostCSS Preset Env 是 CSS 中的 Babel，允许您将现代 CSS 转换为大多数浏览器都能理解的内容，根据您的目标浏览器或运行时环境确定您需要的 polyfill：

PostCSS Modules 允许您使用 CSS 模块。

CSS 模块不是 CSS 标准的一部分，但它们是具有作用域选择器的构建步骤。

Linting 可以帮助您编写正确的 CSS，避免错误或陷阱。Stylelint 插件允许您在构建时删除 CSS。

cssnano 缩小了 CSS 并对代码进行了优化，以在生产中交付最少量的代码。

PostCSS Plugins 提供了可用插件的完整列表。

其中一些：

本文首发 blog，如果喜欢或者有所启发，欢迎 Star，对作者也是一种鼓励。