PostCSS介绍
PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。
工作模式： 它负责把 CSS 代码解析成抽象语法树（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀autoprefixer，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式postcss-preset-env。从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。
Postcss原理
我们在构建项目的时候，通过webpack会把css文件的内容传送给postcss-loader， postcss-loader会解析postcss.config中的插件，传输给 Postcss，Postcss 会解析传入的css，将其转换为一个AST，然后通过各种不同的插件来对这个AST进行操作，最终序列化新的 css，最后将结果返回到 postcss-loader，进行 webpack 下一个 loader 的操作。
注意：插件才是实现，PostCSS 只是提供了一个平台
丰富的插件系统
-
或许你所听说过的东西它都能做，比如：
-
autoprefixer——添加兼容代码前缀
Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。这是postCss最广泛的一个应用场景。
"postcss" loader applies autoprefixer to our CSS.
-
postcss-preset-env 允许你使用未来的 CSS 特性。如 CSS4的语法
-
stylelint——检测语法错误
-
stylefmt——格式化
-
cssnano——压缩代码
-
postcss-sorting——整理代码
-
postcss-sprites——生成雪碧图，等等
你不知道的，它也可以做到，比如：
- doiuse——检测所写代码的浏览器支持情况
- postcss-preset-env——允许你马上使用未来的css特性
- font-magician——生成图标字体规则，等等
....远不止这些 postcss中文文档\
-
cssnext书写未来的css
可以在当前应用程序中使用未来的 CSS4 语法。CSSNex会将任何 CSS4 特性和属性转换为浏览器可以读取的 CSS3 的工具
cssnext的新特性
- 自动提供浏览器前缀支持
- 自定义属性与 var() 支持
- 自定义属性集合与 @apply 支持
- 简化的、更安全的 calc()
- 可自定义的媒体查询
- 媒体查询范围
- 自定义选择器
- 嵌套
- image-set()
- color()
- hwb()
- :: 伪元素语法的降级方案
- overflow-wrap 属性的降级方案
- 不区分大小写的属性
- sysem-ui 字体
css模块化
将作用域限制于组件内，避免了全局作用域的问题，不用担心样式名重复- CSS Modules
编译速度大大提升
PostCSS 声称比预处理器快 3-30 倍。
PostCSS和sass的区别
PostCSS 改变的是一种开发模式
- SASS、less：源代码 -> 生产环境 CSS
- PostCSS：源代码 -> 标准 CSS -> 生产环境 CSS
- Postcss属于css后处理器，动态编译css，在运行的时候进行编译。
预处理器的作用是增强了 CSS 语法，让你可以在 CSS 中使用变量、循环、嵌套等功能，主要代表是 Less、Sass，它们本质上就是一种编译器。JS 中也有类似的例子、像TypeScript 等。
后处理器其实也是一种编译器，如果说预处理器是运行前编译，那么后处理器就是运行时编译。
Sass只是锁定在当前版本的一些特性，而PostCSS是一组插件的集合， 扩展性很强。
postcss可以对sass处理过后的css再处理 最常见的就是autoprefixer
PostCSS和postcss-loader之间的关系
postcss-loader则是webpack的loader组件，主要作用是webpack在读取css模块的时候调用postcss和postcss的插件处理css内容的。
如果不用 webpack，只想处理 css，可以不用 postcss-loader。
\
