PostCSS是一個非常通用的工具，它可以通過javascript插件轉(zhuǎn)換CSS樣式。它的靈活性在于它的建造方式。
PostCSS的核心部分是一個node.js模塊，您可以使用NPM進(jìn)行安裝，它有一個由200多個插件組成的生態(tài)系統(tǒng)，您可以在項目中選擇使用這些插件。
PostCSS既不是預(yù)處理器，也不是后處理器，因為不同的PostCSS插件可能屬于這兩類中的任何一類，或者同時屬于這兩類；它完全取決于您對它的理解。使用PostCSS，您不需要學(xué)習(xí)不同的語法，比如sass或Less；您可以立即開始使用它。
PostCSS獲取現(xiàn)有的css文件并將其轉(zhuǎn)換為javascript可讀數(shù)據(jù)，然后javascript插件執(zhí)行修改，postss返回原始文件的修改版本。聽起來很酷，不是嗎？
在這篇文章中，我們將查看6個Postcss插件，讓您了解使用這個出色的工具可以實現(xiàn)的一些偉大的事情。
Autoprefixer
autoprefixer可能是最知名的postcss插件，因為它被谷歌、Twitter和Shopify等知名科技公司使用。它在必要的地方向CSS規(guī)則添加供應(yīng)商前綴。
autoprefixer使用我可以使用的數(shù)據(jù)。這樣它就不會過時，而且可以應(yīng)用最新的規(guī)則。您可以在它的交互式演示站點上查看它的工作原理。
CSSnext
cssnext是一個CSS發(fā)起者，它允許您在當(dāng)前站點上使用未來的CSS語法。W3C有許多新的CSS規(guī)則，這些規(guī)則目前沒有被瀏覽器實現(xiàn)，但可以使開發(fā)人員更快、更容易地編寫更復(fù)雜的CSS。cssnext是用來彌補這個缺口的。
值得一看它的特性，看看你能用它完成什么，例如你可以在你的設(shè)計中使用自定義媒體查詢、自定義選擇器、顏色修改器、SVG過濾器和新的偽類。
PreCSS
PreCSS是一個postcss插件，工作方式類似于css預(yù)處理器。它可以利用樣式文件中的標(biāo)記之類的SASS。
通過在工作流中引入PreCSS，您可以在CSS代碼中使用變量if else語句、for循環(huán)、mixin、@extend和@import規(guī)則、嵌套和許多其他方便的功能。PreCSS的Github文檔為您提供了如何充分利用它的詳細(xì)說明。
StyleLint
StyleLint是一個現(xiàn)代的CSS Linter，它可以校對和驗證您的CSS代碼。它使避免錯誤變得容易，并促使您遵循一致的編碼約定。
Stylelint了解最新的CSS語法，因此它可以與前面提到的precss插件一起使用。它還允許您進(jìn)行自己的配置，甚至檢查設(shè)置是否有效。
PostssAssets插件是一個方便的CSS文件資源管理器。如果您在URL路徑方面遇到問題，這是一個很好的選擇，因為PostSS資產(chǎn)將樣式表文件與環(huán)境變化隔離開來。
您需要定義加載路徑、相對路徑和基本路徑，插件將自動查找您需要的資源。例如，如果需要foobar.jpg圖像的正確URL，可以編寫以下代碼：
body {
background: resolve('foobar.jpg');
}
Postcss Assets還負(fù)責(zé)節(jié)省緩存，因為如果希望在修改資產(chǎn)時自動更改URL路徑，可以將cachebuster變量設(shè)置為true。這個智能插件還可以計算圖像文件的尺寸（寬度和高度），甚至可以使用預(yù)設(shè)比例調(diào)整它們的大小
如果您需要一個生產(chǎn)站點的優(yōu)化和縮小的CSS文件，那么有必要查看cssnano。它是一個模塊化的插件，由許多較小的單一責(zé)任PostSS插件組成。它不僅執(zhí)行基本的縮小技術(shù)，如刪除空白，還具有高級選項，使集中優(yōu)化成為可能。
除了許多其他功能外，cssnano還能夠重新調(diào)整z-index值、減少自定義標(biāo)識符、轉(zhuǎn)換長度、時間和顏色值以及刪除過時的供應(yīng)商前綴。
原文地址：https://www.hongkiat.com/blog/postcss-plugins/
