PostCSS (一)：認識 PostCSS

PostCSS (一)：認識 PostCSS

PostCSS 是一款對 CSS 進行處理的工具。它主要依賴插件來進行操做。當你須要某些功能的時候，只需配置相應的插件便可。它有很是很是豐富的插件，能夠涵蓋你的開發過程的各個方面。即便沒有知足你須要的插件，你也徹底可使用 JavaScript 來開發本身的插件就能夠了。

它能夠做爲一款 CSS 前置處理器( preprocessor ) 使用, 就像 Sass 和 Less 等同樣，使用 postcss-simple-vars, postcss-mixins, postcss-nested, postcss-sass-extend 等插件來實現 Sass 提供的 變量， mixin，選擇器嵌套，extend 等功能。若是你不想本身配置，也可使用一款已經打包好這些功能， 語法與 Sass 類似的插件precss 來實現preprocessor。

它也能夠做爲一款 後處理器 (post processor)來使用，配合這些插件，知足你的需求：

• 針對瀏覽器兼容：

1. 若是你想使用將來的 CSS 特性那你可使用cssnext ；

2. Autoprefixer，它根據 Can I use… Support tables for HTML5, CSS3, etc 上的數據給屬性添加相對應的瀏覽器前綴。

3. 對老版本的瀏覽器沒有的屬性，有postcss-color-rgba-fallback, postcss-will-change等插件對其回退；

• 針對 CSS 優化

1. 合併媒體查詢(media query)有 css-mqpacker 插件；

2. 刪掉空格分號，最小化 CSS 文件，有cssnano插件；

• 提升開發效率

1. 模塊化 CSS 有 postcss-import 插件經過@import整合全部模塊；

2. 簡寫 CSS 屬性，好比margin-left寫做ml, 有postcss-crip插件；

3. 引入第三方字體，postcss-font-magician 插件能夠只指定font-family便可，@font-face的代碼由插件完成；

4. 生成各類方向的圖形， 有postcss-triangle插件生成三角形， postcss-circle生成圓形

5. 生成網格系統，有lost 插件
   …..

能夠看到 PostCSS 的插件就像一座寶庫同樣，能夠從各個方面知足你，若是沒有你須要的，那就本身動手寫一個也是很是簡單的，PostCSS 提供了相應的 API ， 只須要一些 JavaScript 代碼就能定製知足本身需求的插件。

PostCSS 能夠作這麼多事，又這麼方便簡單，你有沒有愛上它？