Less和Sass主要是解決了一個模塊化的問題，但是還有一個全局的樣式的污染問題。我今天個人分享的就是關(guān)于PostCss的一些個人理解。
PostCss
PostCss是Autoprefixer的開發(fā)者Andrey Sitnik開發(fā)的，它最初是一個通過JavaScript來處理CSS 的方法。
可以理解為一種插件系統(tǒng)（類似于css領(lǐng)域的webpack），它本身只是一個API，作為一個API它可以創(chuàng)建任何需要的插件和工具。
PostCss有兩個概念：pre-processor（預處理器）和post-processor（后處理器）。
像Sass、Less和Stylus都是屬于預處理器的范疇，按照預處理器的語法來寫css的代碼，最后交由預處理器的編譯器編譯成一個傳統(tǒng)的css，這個就叫做預處理器。
post-processor（后處理器）就是我們把css代碼寫完之后，交由它去處理，添加一些必要的屬性，比如比較典型的：CSS Prefixer，會加上一些瀏覽器的前綴。
官方定義
PostCSS is a tool for transformimg CSS with JS plugins.
These plugins can support variables and mixins,transpile future CSS syntax,inline images,and more.
翻譯過來的意思就是說呢，PostCSS是一個用JS插件轉(zhuǎn)換css的工具。這些插件可以支持變量和混合，轉(zhuǎn)換成未來的css語法，內(nèi)聯(lián)圖像等。我們可以把PostCss理解成一個管道，然后在管道各處可以放一些插件，然后從管道經(jīng)過的css都會經(jīng)過插件的處理。實際上PostCss它將css代碼轉(zhuǎn)換成抽象的一個語法結(jié)構(gòu)AST，就是一個對象的一個樹，然后方便插件處理。
PostCss定位和使用
PostCss是一個插件系統(tǒng)，所以它既不是預處理器也不是后處理器，類似于css領(lǐng)域的webpack、Grunt和Gulp進行集成。它的作用就是整合預處理器和后處理器。
關(guān)于PostCss的使用，一般是不單獨使用的，與已有的構(gòu)建工具集合；比如webpack、Grunt和Gulp。
最廣泛的PostCss使用是與webpack集成。
與webpack集成
1 搭建環(huán)境
- 得到一個package.json文件
npm init1560754641265.png
-
安裝webpack依賴包
npm install webpack webpack-cli --save-dev--save表示會把依賴保存在package.json的文件里面來，然后-dev就會保存到devDependencies里面。
注意：”script“：{“bulid”："webpack --config webpack.config.js"}意 思就是說在運行webpack，--config表示指定配置文件，webpack.config.js 配置文件名。
-
配置webpack.config.js
1560751.png
1560752.png -
打包index.js
npm run build -
分離css
因為要查看PostCss打包的一個效果，所以分離css是一定需要的。
需要安裝的插件：
npm install css-loader --save-dev npm install extract-text-webpack-plugin@next --save-dev npm install postcss-loader --save-dev
PostCss 常見插件介紹
-
autoprefixer
自動添加瀏覽器前綴，這個插件是根據(jù)can i use解析css并且為其添加瀏覽器廠商前綴的PostCss插件。
caniuse（https://www.caniuse.com ）是一個網(wǎng)站，我們可以在這個網(wǎng)站里面知道我們所使用的一個屬性的瀏覽器的支持情況。
npm install autoprefixer --save-dev安裝之后添加到webpack.config.js下面的loader里面
-
stylelint
強制開發(fā)人員按照團隊css規(guī)范來寫css樣式的工具，類似的eslint（JS的規(guī)范）。
npm install stylelint stylelint-config-lost stylelint-config-standard --save-dev它是一個強大的，現(xiàn)代的linter，可以幫助您避免錯誤并在您的樣式中強制執(zhí)行約定。 為什么是強大的呢？
因為它的特征：
了解最新的CSS語法，包括自定義屬性和4級選擇器
從HTML，markdown和CSS-in-JS對象和模板文字中提取嵌入式樣式
解析類似CSS的語法，如SCSS，Sass，Less和SugarSS
擁有超過170條內(nèi)置規(guī)則來捕獲錯誤，應(yīng)用限制并強制執(zhí)行風格約定
支持插件，因此您可以創(chuàng)建自己的規(guī)則或使用社區(qū)編寫的插件
自動修復一些違規(guī)行為（實驗性功能）
是很好的測試超過10000的單元測試
支持可共享的配置，您可以擴展或創(chuàng)建自己的配置
被unopinionated這樣你就可以定制棉短絨您的確切需求
有一個不斷增長的社區(qū)，[Facebook]，[GitHub]和[WordPress使用]
關(guān)于它更多的介紹可以通過（https://stylelint.io/ ）官網(wǎng)了解一下。
-
postcss-cssnext（https://cssnext.github.io/ ）
npm install postcss-cssnext --save-dev -
postcss-modules
以模塊化方式實現(xiàn)Css, 重點在于解決了樣式?jīng)_突
npm install postcss-modules --save-dev -
lost
強大的PostCSS網(wǎng)格系統(tǒng)
npm install lost --save-dev
文章主要介紹了PostCss的定位，結(jié)合webpack介紹了PostCss主要的幾個插件：autoprefixer、postcss-cssnext、postcss-modules、lost、stylelint。文章可能存在很多不足，閱讀的小伙伴們看到了可以稍作提示或者哪里有錯誤的可以私信告訴我糾正過來，O(∩_∩)O謝謝。
