除了scss/css 之外，還有一個切版人可以知道的東西！ PostCSS~

1-1. Preprocessor vs Postprocessor

• 除了Preprocessor，其實還有postprocessor

1-1-1. 什麼是 Preprocessor (預處理器)？

• 在Css之前，
• 預處理器是讓開發者撰寫一些類似 CSS 語法的指令，再轉為瀏覽器能懂的 CSS；
• EX. LESS、SASS、SCSS

1-1-2. 什麼是 postprocessor (後處理器)？

• 在Css之後
• 後處理器就是讓開發者依然撰寫 CSS，再經過擴充功能（plugin）的後製處理，將特定功能轉成瀏覽器能懂的指令。
• EX. PostCSS

1-2-3. PostProcessor 的優點?

1. 彈性、擴充性高

如果你選了SCSS，你就必須接受SCSS的一切
(接受他的語法，要用就要用一整套SCSS，你不能只選擇你要的某些功能)

但是如果你用了postcss，你可以選擇你自己想要的功能
可以像 LEGO 般只根據需要加入或刪除功能，像是 precss、prefix、mixin 等。

並且，未來若主流瀏覽器支援了這些功能，要拔除特定 plugin 是很容易的。

2. 你可以寫自己的plugin

可以用javascript寫自己的plugin，解析css語法並且加入一些自己想要的東西

1-2. PostCss

1-2-1. PostCss 入門介紹

• Initial release November 4, 2013
• 透過 Javascript plugin轉化css style
• PostCSS 的核心是 Node.js module，因此你可以用npm安裝
• 目前有超過200個plugin可以使用
• 雖然大部分的人會把PostCSS歸類為 Postprocessor，但也有人說他兩者都是，因為有的plugin其實是屬於前處理
• PostCSS 基本上不太需要像SASS/SCSS學其他語法，安裝上plugin後幾乎可直接使用

運作原理

• PostCSS 是以css為輸入，提供API來分析、修改它的規則。
• 由API轉換組成的Plugin可轉換成很多有用的功能 Ex. 自動添加css prefix, 尋錯等等

https://2019.stateofcss.com/technologies/pre-post-processors/

1-2-2. PostCss 環境設定

1. PostCSS 一般不單獨使用，而是與目前已有的打包工具一起使用。如目前主流的打包工具：Webpack、Grunt、Parcel 和 Gulp 都可以。
2. 針對不同的打包工具做不同的配置，即可使用 PostCSS 及其相關plugin

You can start using PostCSS in just two steps:

1. Find and add PostCSS extensions for your build tool.
2. Select plugins and add them to your PostCSS process.

以下示範以Parcel進行設定：

1-2-2-1 前情提要 - 什麼是Parcel ?

號稱打包零設定的打包工具，適合輕量化的專案

Parcel 安裝

step1 安裝 Parcel

npm install -g parcel-bundler

step2 在你的專案中建立 package.json 檔案

npm init -y

step3 指定進入點

parcel index.html

Parcel 內建了開發專用的伺服器，在你更動檔案的同時會自動重新編譯你的 app，並啟用模組熱替換(hot module replacement )以提高開發效率，你只需要指定進入點：

1-2-2-2 將PostCSS 加入 專案中

新增一個 postcss.config.js 在專案資料夾的root中，將所需的plugin 加入其中 eg. autoprefixer

module.exports = { 
     plugins: [
        require('autoprefixer’)
       
    ]
 }

1-2-3. PostCss Plugin Demo

Plugin 1. Autoprefixer

• 應該是最有名的 PostCss plugin
• 很多著名的公司其實都有用這個 plugin Google, Twitter, and Shopify
• 主要的功能：當需要的時候，將CSS屬性加入各家瀏覽器的前綴詞（prefix），例如：-webkit-、-moz-。
• Autoprefixer的資料來源是 Can I Use ，因此他可以確保他規則會一直是最新的規則

step1. 安裝 plugin - Autoprefixer

執行 npm install autoprefixer --save-dev

package.json中會新增 autoprefixer

step2. 在 postcss.config.js 加入 plugin

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer') 
    ]
}

step3. 可以看到結果囉

• autoPrefixer 的瀏覽器版本可以自行定義，文件可參考：https://github.com/postcss/autoprefixer

Plugin 2. Lost Grid

• Grid System
• 使用 calc() 計算grid
• 瀏覽器支援度很高(支援calc基本上就支援)，支援至 IE9 +
• 也有 flexbox模式，支援 IE10+

step1. 安裝 plugin - Lost

執行 npm install lost --save-dev

package.json

step2. 在 postcss.config.js 加入 plugin

postcss.config.js

module.exports = {
    plugins: [
        require('lost')
    ]
}

step3. 可以看到結果囉

• Lost Grid Demo
  http://lostgrid.org/lostgrid-example.html

其他Plugin

• css-modules 將一般的css，變成像angular一樣封裝
• postcss-preset-env 可以使用最新的 css語法 https://cssnext.github.io/features/

參考資料

PostCss 官方文件
https://github.com/postcss/postcss

10 Awesome PostCSS Plugins to Make You a CSS Wizard https://www.hongkiat.com/blog/postcss-plugins/

Some things you may think about PostCSS... and you might be wrong
http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong/