前言
最近在項(xiàng)目開發(fā)中聽同事提起postcss秃流，然后就去網(wǎng)上看了些關(guān)于這方面的文章赂蕴，看的也是眼花繚亂，什么讓css像js一樣操作舶胀，讓css更靈活之類的概说，所以通過這篇文章我也從學(xué)習(xí)的角度來理解postcss。
一嚣伐、什么是postcss糖赔？
postcss是一種插件系統(tǒng)，是基于js插件去轉(zhuǎn)換css的一個工具轩端，是js可以操作的一種數(shù)據(jù)形式放典。通俗點(diǎn)說它就是一個平臺，就是通過這個平臺可以開發(fā)一些我們自己的插件來處理css。
安裝postcss
全局安裝??npm install -g postcss-cli
本地安裝??npm install postcss --save-dev
二奋构、postcss組成結(jié)構(gòu)
PostCSS 提供了一個解析器壳影，它能夠?qū)?CSS 解析成抽象語法樹（AST）。
官方給出的介紹：
1. CSS Parser? 解析器
2. CSS 節(jié)點(diǎn)數(shù) API
3. source map 生成器
4. 生成節(jié)點(diǎn)樹串
三弥臼、為什么要用postcss宴咧？
在我們實(shí)際開發(fā)中，經(jīng)常會有一些困擾径缅，比如項(xiàng)目過大掺栅，我們的樣式缺乏模塊化的概念，全局變量經(jīng)常被同名問題困擾纳猪，當(dāng)定義class類多的時候經(jīng)常不知起什么名字好氧卧。
這些年隨著sass、less等預(yù)處理器的流行兆旬，讓css寫起來輕松了很多假抄。
postcss同樣可以實(shí)現(xiàn)sass、less一樣的功能丽猬，雖然他們不是一樣的東西宿饱，但是可以實(shí)現(xiàn)一樣的效果，只是postcss是通過插件去實(shí)現(xiàn)的脚祟。
當(dāng)然谬以，它不只是為了像sass、less一樣由桌，不然還開發(fā)它做咩咧为黎，哈哈。
1. 它能夠?yàn)閏ss提供額外的功能行您；
2.? 通過在postcss這個平臺上铭乾，我們能夠開發(fā)一些插件，來處理我們的css娃循，比如：autoprefixer
3.? 能夠使用javaScript來開發(fā)插件炕檩，就是完全使用js編寫；
插件基于css代碼的AST（語法樹）所能進(jìn)行的操作是多種多樣的捌斧，比如可以支持變量和混入（mixin）笛质，增加瀏覽器相關(guān)的聲明前綴，或是把使用將來的css規(guī)范的樣式規(guī)則轉(zhuǎn)譯成當(dāng)前的css規(guī)范支持的格式捞蚂，它的強(qiáng)大之處就在于其不斷發(fā)展的插件體系妇押。
postcss的主要功能有兩個：第一個就是前面提到的把css解析成javaScript可以操作的AST，第二個就是調(diào)用插件來處理AST并得到結(jié)果姓迅。因此不能簡單的把postcss歸類成css預(yù)處理或者后處理工具敲霍。
postcss的使用
postcss一般不單獨(dú)使用俊马，而是與已有的構(gòu)建工具進(jìn)行集成。比如Webpack色冀、Grunt和Gulp都可以進(jìn)行集成潭袱。完成集成后，選擇滿足功能需求的postcss插件并進(jìn)行配置锋恬。
具體使用請參考postcss使用方法
本文是對自己學(xué)習(xí)的一個記錄，其中用了個別大神博客的話编丘，如有侵權(quán)与学，聯(lián)系必刪！
