PostCSS

https://www.ibm.com/developerworks/cn/web/1604-postcss-css/index.html https://github.com/postcss/postcss/blob/master/README.cn.md

PostCSS 是一个開發工具，它提供了一种方式，用 JavaScript 代码来处理 CSS。

它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由 PostCSS 套件来进行处理。 这些 PostCSS 套件會检查並编译那些尚未被浏览器广泛支持的先进的 CSS 语法、内联图片以及其它很多优秀的功能。

也就是說 PostCSS 一般不单独使用，而是与已有的构建工具进行集成，如 Webpack、Grunt 和 Gulp...。完成集成之后，选择满足功能需求的 PostCSS 套件并进行配置。

Start

1. 在你的構建工具添加 PostCSS 擴充功能和套件。
2. 添加套件到您的 PostCSS 運行過程中。

Install

在你的構建工具添加 PostCSS 擴充套件。

npm i -D postcss-load-config

• -D / --save-dev：是存在開發模式的相依套件 https://docs.npmjs.com/misc/config

安裝 postcss-cssnext 外掛

npm i -D postcss-cssnext

Usage

https://github.com/postcss/postcss-loader

Configuration 設定

postcss.config.js

module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {},
    'cssnano': {}
  }
}

Config Cascade 配置級聯

webpack

sass + postCss

https://www.w3cplus.com/preprocessor/sass-to-postcss.html把每個 sass 編譯成 css 然後用 postCss 轉變模塊。