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