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为您的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存储库上有一个可用插件的完整列表

我喜欢的一些包括:

它与Sass有何不同?

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

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

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

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

免费下载我的CSS手册


更多CSS教程: