标题：*
140 字

TAG标签：（用空格隔开）
30 字

恢复历史版本：

HTML转MD HTML转MD2

<a href="https://segmentfault.com/a/1190000003909268" _src="https://segmentfault.com/a/1190000003909268">https://segmentfault.com/a/1190000003909268</a> <h2 id="item-1" style="box-sizing: border-box; margin: 2.5rem 0px 1rem; line-height: 1.2; font-size: 1.75rem; padding-bottom: 0.5rem; border-bottom: 1px double rgba(0, 0, 0, 0.1); color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">前言</h2><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">最近大漠前辈在群里发关于<code style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; color: rgb(232, 62, 140); overflow-wrap: break-word;">PostCSS</code>的系列文章，但是耗子姐姐又说看了有点云里雾里的感觉，所以这篇文章将按一个思考的角度来理解一下 PostCSS 到底是一个什么东西。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);"> <h2 id="item-2" style="box-sizing: border-box; margin: 2.5rem 0px 1rem; line-height: 1.2; font-size: 1.75rem; padding-bottom: 0.5rem; border-bottom: 1px double rgba(0, 0, 0, 0.1); color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">一、提出不懂的地方</h2><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">很多时候第一次在网上查询 PostCSS 概念的时候，大家都解释成一个<code style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; color: rgb(232, 62, 140); overflow-wrap: break-word;">后处理器</code>的概念，其实个人觉得这些概念不重要，更为重要的有以下几点：<ol style="box-sizing: border-box; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li>它本质上是一个什么东西？</li><li>它能解决我们什么问题？</li><li>它是通过什么方式来解决我们的问题？</li><li>它解决我们的问题是为什么？</li><li>怎么实现与&nbsp;<code style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; color: rgb(232, 62, 140); overflow-wrap: break-word;">SASS</code>、<code style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; color: rgb(232, 62, 140); overflow-wrap: break-word;">LESS</code>、<code style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; color: rgb(232, 62, 140); overflow-wrap: break-word;">Stylus</code>&nbsp;相同的功能（因为它们被经常拿来比较）</li><li>它由哪些东西组成？</li><li>既然是程序可以用的，那么它的API呢？</li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">Q: 这个时候，你应该会问：为什么要将组成和API放到最后呢？<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">A: 那是因为我们在认识一个不太清楚的东西的时候，第一次肯定是一个直观的认识：它到底有什么用？而不会说，一来就去深入的研究它。不过这里本质还是要先说一下的，先留个印象。<h2 id="item-3" style="box-sizing: border-box; margin: 2.5rem 0px 1rem; line-height: 1.2; font-size: 1.75rem; padding-bottom: 0.5rem; border-bottom: 1px double rgba(0, 0, 0, 0.1); color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">二、个个击破</h2><h3 id="item-3-1" style="box-sizing: border-box; margin: 2.25rem 0px 1rem; line-height: 1.2; font-size: 1.5rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">1. 它本质上是一个什么东西？</h3><ul style="box-sizing: border-box; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li>PostCSS 可以直观的理解为：它就是一个<code style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; color: rgb(232, 62, 140); overflow-wrap: break-word;">平台、平台、平台</code>，重要的事情来三遍比较爽，哈哈！</li></ul><blockquote style="box-sizing: border-box; margin: 0px 0px 1.25rem; padding-left: 1rem; border-left: 0.25rem solid rgb(233, 236, 239); color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">为什么说它是一个平台呢？因为我们直接用它，感觉不能干什么事情，但是如果让一些插件在它上面跑，那么将会很强大。</blockquote><ul style="box-sizing: border-box; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li>PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树（AST）。</li></ul><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">上面两条看完后，我们可以理解为下面这个模型。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);"><img referrerpolicy="no-referrer" src="https://segmentfault.com/img/bVqy8j" alt="图片描述" title="图片描述" style="box-sizing: border-box; border-style: none; vertical-align: middle; max-width: 100%; cursor: zoom-in;"/><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">所以说，PostCSS 它需要一个插件系统才能够发挥作用。我们可以通过“插件”来传递AST，然后再把AST转换成一个串，最后再输出到目标文件中去。当然，这里是有API可以用，这里先不讲，免得晕了。<h3 id="item-3-2" style="box-sizing: border-box; margin: 2.25rem 0px 1rem; line-height: 1.2; font-size: 1.5rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">2. 它能解决我们什么问题？它是通过什么方式来解决我们的问题？</h3><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">上面的图很清晰，但是我还是不知道是个什么东西！所以接下来温和点，直接从代码层面来感官的认识一下。<ul style="box-sizing: border-box; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li>它能够为 CSS 提供额外的功能；</li><li>通过在 PostCSS 这个<code style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; color: rgb(232, 62, 140); overflow-wrap: break-word;">平台</code>上，我们能够开发一些插件，来处理我们的CSS，比如热门的：autoprefixer</li><li>我们能够使用JavaScript来开发插件（这点对前端来说很重要）</li></ul><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">好吧，看到一个熟悉的单词了：autoprefixer，这里我们就让它来当栗子吧，可能更容易理解一点。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">首先，我们需要做一些准备，安装好需要的东西。<pre class="hljs stata" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; margin-top: 0px; margin-bottom: 1.25rem; overflow: auto; color: rgb(51, 51, 51); padding: 0.5rem; background-color: rgb(233, 236, 239); max-height: 35rem; line-height: 1.5;">//&nbsp;postcss&nbsp;的命令行工具sudo&nbsp;npm&nbsp;install&nbsp;&nbsp;-g&nbsp;postcss-cli//&nbsp;autoprefixer&nbsp;插件sudo&nbsp;npm&nbsp;install&nbsp;-g&nbsp;autoprefixer</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">第一次用命令行能让你更直观去理解它哈，所以请要有一颗折腾的心。<pre class="hljs stata" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; margin-top: 0px; margin-bottom: 1.25rem; overflow: auto; color: rgb(51, 51, 51); padding: 0.5rem; background-color: rgb(233, 236, 239); max-height: 35rem; line-height: 1.5;">//&nbsp;1.&nbsp;先看下这个命令有哪些参数可以用postcss&nbsp;--helpUsage:&nbsp;/usr/local/bin/postcss&nbsp;-use&nbsp;plugin&nbsp;[--config|-c&nbsp;config.json]&nbsp;[--output|-o
output.css]&nbsp;[input.css]

选项：
&nbsp;&nbsp;-c,&nbsp;--config&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;JSON&nbsp;file&nbsp;with&nbsp;plugin&nbsp;configuration
&nbsp;&nbsp;-u,&nbsp;--use&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;postcss&nbsp;plugin&nbsp;name&nbsp;(can&nbsp;be&nbsp;used&nbsp;multiple&nbsp;times)
&nbsp;&nbsp;-o,&nbsp;--output&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Output&nbsp;file&nbsp;(stdout&nbsp;if&nbsp;not&nbsp;provided)
&nbsp;&nbsp;-d,&nbsp;--dir&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Output&nbsp;directory
&nbsp;&nbsp;-r,&nbsp;--replace&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Replace&nbsp;input&nbsp;file(s)&nbsp;with&nbsp;generated&nbsp;output&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[boolean]
&nbsp;&nbsp;-s,&nbsp;--syntax&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Alternative&nbsp;input&nbsp;syntax&nbsp;parser
&nbsp;&nbsp;-p,&nbsp;--parser&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Alternative&nbsp;CSS&nbsp;parser
&nbsp;&nbsp;-t,&nbsp;--stringifier&nbsp;&nbsp;Alternative&nbsp;output&nbsp;stringifier
&nbsp;&nbsp;-w,&nbsp;--watch&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;auto-recompile&nbsp;when&nbsp;detecting&nbsp;source&nbsp;changes
&nbsp;&nbsp;-v,&nbsp;--version&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;显示版本号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[boolean]
&nbsp;&nbsp;-h,&nbsp;--help&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;显示帮助信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[boolean]

示例：
&nbsp;&nbsp;postcss&nbsp;--use&nbsp;autoprefixer&nbsp;-c&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Use&nbsp;autoprefixer&nbsp;as&nbsp;a&nbsp;postcss&nbsp;plugin
&nbsp;&nbsp;options.json&nbsp;-o&nbsp;screen.css&nbsp;screen.css
&nbsp;&nbsp;postcss&nbsp;--use&nbsp;autoprefixer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pass&nbsp;plugin&nbsp;parameters&nbsp;in
&nbsp;&nbsp;--autoprefixer.browsers&nbsp;&quot;&gt;&nbsp;5%&quot;&nbsp;-o&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plugin.option&nbsp;notation
&nbsp;&nbsp;screen.css&nbsp;screen.css
&nbsp;&nbsp;postcss&nbsp;-u&nbsp;postcss-cachify&nbsp;-u&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Use&nbsp;multiple&nbsp;plugins&nbsp;and&nbsp;multiple
&nbsp;&nbsp;autoprefixer&nbsp;-d&nbsp;build&nbsp;*.css&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input&nbsp;files

Please&nbsp;specify&nbsp;at&nbsp;least&nbsp;one&nbsp;plugin&nbsp;name.</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">PS: 我贴出来是方便大家在看的时候不用电脑……^_^<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">好吧，先看一下文件目录，这里我只说一下比较好写的方式，就是将一些参数配置到配置文件中去。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);"><img referrerpolicy="no-referrer" src="https://segmentfault.com/img/bVqy8m" alt="图片描述" title="图片描述" style="box-sizing: border-box; border-style: none; vertical-align: middle; max-width: 100%; cursor: zoom-in;"/><pre class="hljs 1c" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; margin-top: 0px; margin-bottom: 1.25rem; overflow: auto; color: rgb(51, 51, 51); padding: 0.5rem; background-color: rgb(233, 236, 239); max-height: 35rem; line-height: 1.5;">//&nbsp;config.json:&nbsp;所有的配置//&nbsp;p.json:&nbsp;仅有&nbsp;autoprefixer&nbsp;插件的配置//&nbsp;config.json&nbsp;的内容{&nbsp;&nbsp;&nbsp;&nbsp;&quot;use&quot;:&nbsp;[&quot;autoprefixer&quot;],&nbsp;&nbsp;&nbsp;&nbsp;&quot;input&quot;:&nbsp;&quot;src/index.css&quot;,&nbsp;&nbsp;&nbsp;&nbsp;&quot;output&quot;:&nbsp;&quot;index.css&quot;,&nbsp;&nbsp;&nbsp;&nbsp;&quot;autoprefixer&quot;:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;browsers&quot;:&nbsp;&quot;&gt;&nbsp;5%&quot;
&nbsp;&nbsp;&nbsp;&nbsp;}
}//&nbsp;p.json&nbsp;的内容{&nbsp;&nbsp;&nbsp;&nbsp;&quot;autoprefixer&quot;:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;browsers&quot;:&nbsp;&quot;&gt;&nbsp;5%&quot;
&nbsp;&nbsp;&nbsp;&nbsp;}
}</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">接下来我们在终端里面输入：<pre class="hljs stylus" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; margin-top: 0px; margin-bottom: 1.25rem; overflow: auto; color: rgb(51, 51, 51); padding: 0.5rem; background-color: rgb(233, 236, 239); max-height: 35rem; line-height: 1.5;">//&nbsp;最简洁的方式postcss&nbsp;-c&nbsp;config.json//&nbsp;稍微复杂一点的方式，这里要用&nbsp;-i&nbsp;参数，help里面没有，我是从config.json里面的配置猜出来的，官方的那个写法出不来postcss&nbsp;-u&nbsp;autoprefixer&nbsp;-c&nbsp;p.json&nbsp;-i&nbsp;src/index.css&nbsp;-o&nbsp;index.css//&nbsp;最复杂的方式//&nbsp;还是不写比较好。。。</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">跟平时想到的效果一样：<pre class="hljs scss" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; margin-top: 0px; margin-bottom: 1.25rem; overflow: auto; color: rgb(51, 51, 51); padding: 0.5rem; background-color: rgb(233, 236, 239); max-height: 35rem; line-height: 1.5;">//&nbsp;src/index.css&nbsp;中的源码`*&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;transition:&nbsp;all&nbsp;.1s;
}`//&nbsp;转换过后的代码&nbsp;index.css`*&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition:&nbsp;all&nbsp;.1s;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition:&nbsp;all&nbsp;.1s;
}`</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">好吧，现在肯定就对 PostCSS 有一个感官的认识了，接下来就是需要自己动手去用一下&nbsp;<code style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; color: rgb(232, 62, 140); overflow-wrap: break-word;">cssnext</code>&nbsp;这个插件了～看会发生什么，这里就不写了，也挺好用的，不过应该还是草案状态。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">我们开发不可能用命令行吧，所以这里再接着介绍代码编写，然后用 node 去执行文件的方式。直接上代码吧。<pre class="hljs javascript" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; margin-top: 0px; margin-bottom: 1.25rem; overflow: auto; color: rgb(51, 51, 51); padding: 0.5rem; background-color: rgb(233, 236, 239); max-height: 35rem; line-height: 1.5;">//&nbsp;1.&nbsp;先安装一下需要的库npm&nbsp;install&nbsp;postcss&nbsp;--save-dev
npm&nbsp;install&nbsp;autoprefixer&nbsp;--save-dev//&nbsp;2.&nbsp;其实应该先看看&nbsp;postcss&nbsp;的&nbsp;package.json&nbsp;文件，来看看包含了些什么，留个印象//&nbsp;3.&nbsp;p.js&nbsp;中的代码var&nbsp;postcss&nbsp;=&nbsp;require(&#39;postcss&#39;);var&nbsp;autoprefixer&nbsp;=&nbsp;require(&#39;autoprefixer&#39;);var&nbsp;fs&nbsp;=&nbsp;require(&#39;fs&#39;);var&nbsp;css&nbsp;=&nbsp;&#39;*&nbsp;{&nbsp;transition:&nbsp;all&nbsp;.1s;&nbsp;}&#39;;

postcss([autoprefixer])
&nbsp;&nbsp;&nbsp;&nbsp;.process(css)
&nbsp;&nbsp;&nbsp;&nbsp;.then(function(result)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;这一行是学习的时候需要的，看一下到底对象里面包含什么
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(result);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(result.css)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.writeFileSync(&#39;index.css&#39;,&nbsp;result.css);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(result.map)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.writeFileSync(&#39;index.css.map&#39;,&nbsp;result.map);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;});//&nbsp;4.&nbsp;执行&nbsp;p.jsnode&nbsp;p</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">好吧，最后的结果和之前用命令行的方式一样，只不过过程不同。这样下来应该对 PostCSS 有了更多的感觉了吧。还没完，不用慌～我们还需要提出一个问题，我都有&nbsp;<code style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; color: rgb(232, 62, 140); overflow-wrap: break-word;">SASS</code>&nbsp;等预处理器了，还拿它来不是又给前端届添乱么？因为这2年东西确实太多了～<blockquote style="box-sizing: border-box; margin: 0px 0px 1.25rem; padding-left: 1rem; border-left: 0.25rem solid rgb(233, 236, 239); color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">记住一句话：存在即合理</blockquote><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">既然合理，那么我们就看看它有什么优势呗～<h3 id="item-3-3" style="box-sizing: border-box; margin: 2.25rem 0px 1rem; line-height: 1.2; font-size: 1.5rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">3. 它解决我们的问题是为什么？优势何在？</h3><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">比如，我们用 SASS 来处理 box-shadow 的前缀，我们需要这样写：<pre class="hljs scss" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; margin-top: 0px; margin-bottom: 1.25rem; overflow: auto; color: rgb(51, 51, 51); padding: 0.5rem; background-color: rgb(233, 236, 239); max-height: 35rem; line-height: 1.5;">/*&nbsp;CSS3&nbsp;box-shadow&nbsp;*/@mixin&nbsp;box-shadow($top,&nbsp;$left,&nbsp;$blur,&nbsp;$size,&nbsp;$color,&nbsp;$inset:&nbsp;false)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;@if&nbsp;$inset&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:&nbsp;inset&nbsp;$top&nbsp;$left&nbsp;$blur&nbsp;$size&nbsp;$color;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:&nbsp;inset&nbsp;$top&nbsp;$left&nbsp;$blur&nbsp;$size&nbsp;$color;
&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;@else&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:&nbsp;$top&nbsp;$left&nbsp;$blur&nbsp;$size&nbsp;$color;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:&nbsp;$top&nbsp;$left&nbsp;$blur&nbsp;$size&nbsp;$color;
&nbsp;&nbsp;&nbsp;&nbsp;}
}</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">使用 PostCSS 我们只需要按标准的 CSS 来写就行了，因为最后 autoprefixer 会帮我们做添加这个事情～<pre class="hljs mipsasm" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; margin-top: 0px; margin-bottom: 1.25rem; overflow: auto; color: rgb(51, 51, 51); padding: 0.5rem; background-color: rgb(233, 236, 239); max-height: 35rem; line-height: 1.5;">box-shadow:&nbsp;0&nbsp;0&nbsp;3px&nbsp;5px&nbsp;rgba(222,&nbsp;222,&nbsp;222,&nbsp;.3);</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">所以，这里就出现了一个经常大家说的未来编码的问题。实际上，PostCSS 改变的是一种开发模式。<ul style="box-sizing: border-box; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li>SASS等工具：源代码 -&gt; 生产环境 CSS</li><li>PostCSS：源代码 -&gt; 标准 CSS -&gt; 生产环境 CSS</li></ul><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">这样能体会出优势吧，但是目前大家都是 SASS + PostCSS 这样的开发模式，其实我认为是不错的，取长补短嘛，当然，在 PostCSS 平台上都是可以做到的，只是目前这个过渡期，这样更好，更工程化。接下来我就介绍一些方法来纯粹是用 PostCSS。<h3 id="item-3-4" style="box-sizing: border-box; margin: 2.25rem 0px 1rem; line-height: 1.2; font-size: 1.5rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">4. 怎么实现与 SASS、LESS、Stylus 相同的功能</h3><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">其实这一节我都不需要写了～列一下插件就行了，因为插件才是实现，PostCSS 只是提供了一个平台。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">其实可以去官方看看：<a href="https://github.com/postcss/postcss" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;">插件系统</a> 这里列几个便于理解的插件<ul style="box-sizing: border-box; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li>postcss-each</li><li>postcss-for</li><li>postcss-mixins</li><li>postcss-extend</li></ul><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">从名字就能看出来了吧～应该很好理解。<h3 id="item-3-5" style="box-sizing: border-box; margin: 2.25rem 0px 1rem; line-height: 1.2; font-size: 1.5rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">5. 它由哪些东西组成？</h3><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">其实从官方介绍来看，只包含以下内容：<ol style="box-sizing: border-box; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li>CSS Parser</li><li>CSS 节点树 API</li><li>source map 生成器</li><li>生成节点树串</li></ol><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">英文不太好 ＝＝ ，就这 4 部分吧，从第一个图其实也能够看出来。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">其中的 I/O 体现在什么地方呢？好吧，很容易想到，主要体现在：<ul style="box-sizing: border-box; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li>Input:&nbsp;插件程式和CSS Parser</li><li>Output:&nbsp;生成节点树串</li></ul><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">CSS Parser 可以理解为一个内部过程，而插件程式主要体现在：<pre class="hljs stylus" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; margin-top: 0px; margin-bottom: 1.25rem; overflow: auto; color: rgb(51, 51, 51); padding: 0.5rem; background-color: rgb(233, 236, 239); max-height: 35rem; line-height: 1.5;">postcss([&nbsp;autoprefixer&nbsp;])</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">最后生成的节点树串体现在：<pre class="hljs typescript" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; margin-top: 0px; margin-bottom: 1.25rem; overflow: auto; color: rgb(51, 51, 51); padding: 0.5rem; background-color: rgb(233, 236, 239); max-height: 35rem; line-height: 1.5;">postcss().process().then(function&nbsp;(result)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;就是这里了
&nbsp;&nbsp;&nbsp;&nbsp;console.log(result.css);
});//&nbsp;现在我贴一下上面&nbsp;result&nbsp;对象的一个输出结果//&nbsp;这里我多引入了一个&nbsp;cssnano&nbsp;插件//&nbsp;改变的代码就这点，为了更全的看&nbsp;resultvar&nbsp;opts&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;from:&nbsp;&#39;src/index.css&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;to:&nbsp;&#39;index.css&#39;,&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;配置&nbsp;map
&nbsp;&nbsp;&nbsp;&nbsp;map:&nbsp;{&nbsp;inline:&nbsp;false&nbsp;}
};
postcss([&nbsp;autoprefixer,&nbsp;cssnano()&nbsp;]).process(css,&nbsp;opts)

Result&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;processor:&nbsp;Processor&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;处理器的版本号
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;version:&nbsp;&#39;5.0.10&#39;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;加载的一堆插件
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plugins:&nbsp;[
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],&nbsp;[Object],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Object],&nbsp;[Object]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]
&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;messages:&nbsp;[],
&nbsp;&nbsp;&nbsp;&nbsp;root:&nbsp;Root&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;raws:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;semicolon:&nbsp;false,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after:&nbsp;&#39;&#39;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;&#39;root&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nodes:&nbsp;[
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Object]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input:&nbsp;[Object],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;start:&nbsp;[Object]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_autoprefixerDisabled:&nbsp;false,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_autoprefixerPrefix:&nbsp;false,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rawCache:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;colon:&nbsp;&#39;:&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indent:&nbsp;&#39;&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeDecl:&nbsp;&#39;&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeRule:&nbsp;&#39;&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeOpen:&nbsp;&#39;&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeClose:&nbsp;&#39;&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeComment:&nbsp;&#39;&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after:&nbsp;&#39;&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;emptyBody:&nbsp;&#39;&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;commentLeft:&nbsp;&#39;&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;commentRight:&nbsp;&#39;&#39;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;我们代码中配置&nbsp;opts&nbsp;变量
&nbsp;&nbsp;&nbsp;&nbsp;opts:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;from:&nbsp;&#39;src/index.css&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to:&nbsp;&#39;index.css&#39;
&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;这就是重新生成的&nbsp;节点树串
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;这里有自动补全和高效压缩的效果
&nbsp;&nbsp;&nbsp;&nbsp;css:&nbsp;&#39;*{-webkit-transition:all&nbsp;.1s;transition:all&nbsp;.1s}&#39;,&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;map的文件的配置
&nbsp;&nbsp;&nbsp;&nbsp;map:&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SourceMapGenerator&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_file:&nbsp;&#39;index.css&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_sourceRoot:&nbsp;null,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_skipValidation:&nbsp;false,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_sources:&nbsp;ArraySet&nbsp;{&nbsp;_array:&nbsp;[Object],&nbsp;_set:&nbsp;[Object]&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_names:&nbsp;ArraySet&nbsp;{&nbsp;_array:&nbsp;[],&nbsp;_set:&nbsp;{}&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_mappings:&nbsp;MappingList&nbsp;{&nbsp;_array:&nbsp;[Object],&nbsp;_sorted:&nbsp;true,&nbsp;_last:&nbsp;[Object]&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_sourcesContents:&nbsp;{&nbsp;&#39;$src/index.css&#39;:&nbsp;&#39;*&nbsp;{&nbsp;transition:&nbsp;all&nbsp;.1s;&nbsp;}&#39;&nbsp;}&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;这里应该是链式要用的吧，暂时不深究
&nbsp;&nbsp;&nbsp;&nbsp;lastPlugin:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Function]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;postcssPlugin:&nbsp;&#39;cssnano-reset-stylecache&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;postcssVersion:&nbsp;&#39;5.0.10&#39;
&nbsp;&nbsp;&nbsp;&nbsp;}
}</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">其实吧，这样有点抽象的，还是来看熟悉的 API 吧。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">这里出现了 sourcemap，说明 PostCSS 中的转换功能是它必备的，但是必备并不等于：源代码与目标代码不能完全一致。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">这里吐槽一下 Chrome 的 sourcemap 功能，一坨屎！下面看看 firefox 里面的效果吧。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);"><img referrerpolicy="no-referrer" src="https://segmentfault.com/img/bVqy8H" alt="图片描述" title="图片描述" style="box-sizing: border-box; border-style: none; vertical-align: middle; max-width: 100%; cursor: zoom-in;"/><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">这里 firefox 里面就自动映射了源文件，非常不错！<h3 id="item-3-6" style="box-sizing: border-box; margin: 2.25rem 0px 1rem; line-height: 1.2; font-size: 1.5rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">6. 既然是程序可以用的，那么它的API呢？</h3><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">其实官方有 API 的详细解释，我看了一下，一看就明白了，就不再花时间介绍了，大家可以去看看，这样会知道，原来如此～<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">PS: 大家可以先看看 Node Common 和 Node相关的，然后再看 plugin<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://github.com/postcss/postcss/blob/master/docs/api.md" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;">官方API</a><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">这里看一个 DEMO，主要做 rem 和 px 单位之间的互换，加入 processors 就可以用了，很方便：<pre class="hljs javascript" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; margin-top: 0px; margin-bottom: 1.25rem; overflow: auto; color: rgb(51, 51, 51); padding: 0.5rem; background-color: rgb(233, 236, 239); max-height: 35rem; line-height: 1.5;">var&nbsp;custom&nbsp;=&nbsp;function(css,&nbsp;opts){
&nbsp;&nbsp;&nbsp;&nbsp;css.eachDecl(function(decl){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;decl.value&nbsp;=&nbsp;decl.value.replace(/\d+rem/,&nbsp;function(str){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;16&nbsp;*&nbsp;parseFloat(str)&nbsp;+&nbsp;&quot;px&quot;;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;});
};</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">开发插件可以看一下&nbsp;<a href="https://github.com/postcss/postcss/blob/master/docs/guidelines/plugin.md" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;">官方插件指南</a><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">更细致的地方，之后有时间的时候再写写 ^_^ 一说技术就停不下来了～<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">大家在问？我怎么在工程上应用它呢？好吧，使用 gulp, grunt, webpack 都是可以的，我觉得都理解了 PostCSS ，使用这些就很简单了，一查资料，拷贝一份配置就可以开始用了～就这样吧，下次再结合 react 来介绍一下一个叫: postcss-js 的插件，看上去还不错，还没深入用，用到的时候再分享吧。<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">其实我也是初学者，只是用了自己的学习方法来梳理成文章，下面都是我看过的文章，部分是引用的。这里就不全部举例了，看的文章有点多。。。<h2 id="item-4" style="box-sizing: border-box; margin: 2.5rem 0px 1rem; line-height: 1.2; font-size: 1.75rem; padding-bottom: 0.5rem; border-bottom: 1px double rgba(0, 0, 0, 0.1); color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">参考的文章</h2><ul style="box-sizing: border-box; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li>最权威的初认识&nbsp;<a href="https://github.com/postcss/postcss" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;"></a><a href="https://github.com/postcss/postcss" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;">https://github.com/postcss/postcss</a></li><li>一个不错的东西 rework&nbsp;<a href="https://github.com/reworkcss" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;"></a><a href="https://github.com/reworkcss" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;">https://github.com/reworkcss</a></li><li>理解 AST 等插件解析技术&nbsp;<a href="http://rapheal.sinaapp.com/category/js/uglify%E6%BA%90%E7%A0%81/" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;"></a><a href="http://rapheal.sinaapp.com/category/js/uglify%E6%BA%90%E7%A0%81/" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;">http://rapheal.sinaapp.com/category/js/uglify%E6%BA%90%E7%A0%81/</a></li><li>大漠的系列文章，应用型很强，推荐&nbsp;<a href="http://www.w3cplus.com/blog/tags/517.html" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;"></a><a href="http://www.w3cplus.com/blog/tags/517.html" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;">http://www.w3cplus.com/blog/tags/517.html</a></li><li>一个年龄差不多的开发者的解释&nbsp;<a href="http://acgtofe.com/posts/2015/05/modular-transforming-with-postcss/" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;"></a><a href="http://acgtofe.com/posts/2015/05/modular-transforming-with-postcss/" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;">http://acgtofe.com/posts/2015/05/modular-transforming-with-postcss/</a></li><li>一篇稍微理论化解释的文章&nbsp;<a href="http://www.oschina.net/translate/its-time-for-everyone-to-learn-about-postcss?cmp" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;"></a><a href="http://www.oschina.net/translate/its-time-for-everyone-to-learn-about-postcss?cmp" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;">http://www.oschina.net/translate/its-time-for-everyone-to-learn-about-postcss?cmp</a></li><li>一个开发模式简单的优劣比较&nbsp;<a href="http://caibaojian.com/css-processor.html" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;"></a><a href="http://caibaojian.com/css-processor.html" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;">http://caibaojian.com/css-processor.html</a></li></ul><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.25rem; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; white-space: normal; background-color: rgb(255, 255, 255);">大家也可以直接阅读我的博客：<a href="http://www.60sky.com/" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;"></a><a href="http://www.60sky.com/" rel="nofollow noreferrer" target="_blank" style="box-sizing: border-box; color: rgb(0, 150, 94); background-color: transparent; text-decoration-line: none;">http://www.60sky.com</a><audio controls="controls" style="display: none;"></audio>