PostCSS简介

> POSTCSS：强大的CSS工具超出预处理器

本介绍COPTCSS探讨了其优于传统CSS（如Sass and Sass）的优势，它的功能以及其庞大的插件生态系统的功能。

键突出显示：

基于node.js的工具> PostCSS，使用插件增强有效的CSS。 它将CSS解析为抽象的语法树（AST），在生成最终输出之前可以操纵。 它可以补充诸如Sass，Simelt或Stylus的预处理器。

> PostCSS提供的好处，包括标准CSS解析，可自定义的插件集成，特定于项目的配置以及创建自定义插件的功能。 许多开发人员已经通过插件（例如AutopRefixer）间接地使用Postcs。

> PostCSS需要Node.js，与WebPack，Parcel和Gulp.js等构建工具无缝集成。 请注意，至少一个插件对于功能都是必需的。
• > PostCSS使用 postcss支持源文件更改的自动重建。 JavaScript配置文件允许进行全面的选项管理和特定环境设置（开发与生产）。
• >预处理程序：优点和劣势
• --watch>诸如Sass，Limes和Stylus之类的预处理器引入了嵌套，变量和Mixins等功能，从而改善了CSS管理。尽管其中一些功能成为本地CSS，但预处理器对于大型项目和保持编码一致性仍然很有价值。
但是，预处理器有局限性：

有限的可扩展性：预处理程序提供固定的功能集，因此很难将功能扩展到其内置功能之外。 自定义功能可能是可能的，但是复杂的任务（例如内部的SVG）仍然超出其范围。 执行编码样式也很具有挑战性。

非标准语法：预处理器介绍自己的语法，需要在浏览器解释之前进行汇编。如果预处理器更改或不可用，则会创建依赖性问题，并需要代码更新。

>

PostCSS提供了令人信服的替代方案。

• 了解PostCSS
PostCSS不是预处理器；这是CSS变压器。它处理有效的CSS，通过插件来增强它。 即使是SASS/更少的用户，在初次汇编后也经常合并邮政编码。通用的PostCSS插件AutoPrefixer会自动添加供应商前缀。
• Postcss本身是被动的；它将CSS解析为AST。插件处理此AST，修改属性。 然后，PostCSS从修改后的AST。PostCSS提供了大约350个插件，涵盖了

  处理，@import简化，图像资产处理，覆盖和缩短的任务，PostCSS提供了广泛的灵活性。 可以通过PostCSS插件目录访问用户友好的插件搜索。 calc()> PostCSS优势包括：

  >标准CSS：> >可自定义功能：
仅使用所需的插件和功能。 这允许对CSS处理管道进行细粒度的控制。
• > 特定于项目的配置：
为每个项目分别配置插件，适合特定要求。
• 自定义插件开发：
在JavaScript中创建自定义插件以扩展PostCSS的功能。
• >潜在的预处理器替换：
如果已经使用了诸如autoprefixer之类的插件，那么PostCSS可能会替换您的预处理器，将工作流简化为单个步骤。
• >
>安装和使用PostCSS

> Postcss需要node.js。本指南展示了命令行安装和用法，尽管与构建工具的集成也是可能的。

全局安装：

1. >验证安装：

   <code class="language-bash">npm install -g postcss-cli</code>

2. 插件安装（PostCSS-Import）：

   <code class="language-bash">postcss --help</code>

>创建一个示例项目（
3. ），其中包含，，

   <code class="language-bash">npm install -g postcss-import</code>

   的文件夹和
> files（如原始文本中所述）。 然后运行PostCSS：

cssproject src源地图，AutopRefixer和Minification main.css_reset.css _elements.css PostCSS默认情况下生成内线源地图。 使用

用于外部地图，

<code class="language-bash">postcss ./src/main.css --use postcss-import --output ./styles.css</code>

将其禁用（建议用于生产）。

> autoprefixer添加供应商前缀：>

>与

命令一起使用--map。 --no-mapcssnano将CSS减小：

将其包括在您的

<code class="language-bash">npm install -g autoprefixer</code>

>命令中，然后使用

进行生产。postcss> postcss-import

>自动化构建和配置文件

<code class="language-bash">npm install -g cssnano</code>

和postcss>选项启用文件更改上的自动重建。> --no-mapa

>文件简化配置：

使用

进行开发模式并省略用于生产。

> --watch--verbose结论

PostCSS提供了一种灵活而有力的CSS处理方法。 通过掌握其插件系统，您可以为任何Web项目创建高度定制和高效的工作流程。 原始文本中提供了更多资源。 常见问题解答还包括在原始文本的末尾。

>

以上是PostCSS简介的详细内容。更多信息请关注PHP中文网其他相关文章！