PostCSS简介

探索PostCSS，这是一个可帮助您编写现代CSS的出色工具。 PostCSS是一种非常流行的工具，允许开发人员编写CSS预处理程序或后处理程序

介绍

PostCSS是一种工具，允许开发人员编写CSS预处理器或后处理器，称为外挂程式。有大量提供许多功能的插件，有时“ PostCSS”一词是指工具本身，外加插件生态系统。

PostCSS插件可以通过命令行运行，但通常由任务运行者在构建时调用。

基于插件的体系结构为您需要的所有与CSS相关的操作提供了通用基础。

注意：尽管PostCSS的名称不是CSS后处理器，但它可用于构建它们以及其他内容

为什么如此受欢迎

PostCSS提供了一些功能，这些功能将大大改善您的CSS，并且可以与您选择的任何构建工具很好地集成。

安装PostCSS CLI

使用纱：

yarn global add postcss-cli

或者npm：

npm install -g postcss-cli

完成后，postcss命令将在您的命令行中可用。

例如，以下命令在css /文件夹中包含的CSS文件上运行autoprefixer插件，并将结果保存在main.css文件中：

postcss --use autoprefixer -o main.css css/*.css

有关PostCSS CLI的更多信息，请参见：https://github.com/postcss/postcss-cli。

最受欢迎的PostCSS插件

PostCSS为您的CSS处理提供了几种出色工具的通用接口。

以下是一些最受欢迎的插件，以概述使用PostCSS可能做的事情。

自动前缀

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

它根据我可以用吗数据，因此您不必担心某个功能是否需要一个前缀，或者是否由于过时而不再需要使用的前缀。

您可以编写更简洁的CSS。

例子：

a {
    display: flex;
}

被编译为

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

cssnext

https://github.com/MoOx/postcss-cssnext

这个插件是巴别塔CSS的功能，可让您使用现代CSS功能，同时又可以将其转换为较旧的浏览器更易于消化的CSS：

它使用Autoprefixer添加前缀（因此，如果使用此前缀，则无需直接使用Autoprefixer）
它允许您使用CSS变量
它允许您使用嵌套，例如在Sass中

和多很多！

CSS模块

PostCSS模块让您使用CSS模块。

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

csslint

整理可以帮助您编写正确的CSS并避免错误或陷阱。这风格插件可让您在构建时加载CSS。

csnano

csnano最小化CSS并进行代码优化，以使生产中交付的代码量最少。

其他有用的插件

在PostCSS GitHub存储库上有一个可用插件的完整列表。

我喜欢的一些包括：

失格是PostCSS网格系统
暴躁的提供类似Sass的mixins
后嵌套提供使用Sass嵌套规则的功能
后嵌套的祖先，请引用嵌套CSS中的任何祖先选择器
postcss-简单变量，使用类似Sass的变量
PreCSS为您提供Sass的许多功能，这是最接近完整Sass替代品的地方

它与Sass有何不同？

还是任何其他CSS预处理器？

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

您“选择自己的冒险”这一事实意味着您仍然可以在PostCSS旁边使用喜欢的任何其他工具。如果这是您想要的，您仍然可以使用Sass，并使用PostCSS来执行Sass不能执行的其他操作，例如自动前缀或插入。

您可以编写自己的PostCSS插件来执行所需的任何操作。

免费下载我的CSS手册