6個很棒的PostCSS插件，讓您成爲一個CSS嚮導

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

cssnext是一個CSS發起者，它容許您在當前站點上使用將來的CSS語法。W3C有許多新的CSS規則，這些規則目前沒有被瀏覽器實現，但可使開發人員更快、更容易地編寫更復雜的CSS。cssnext是用來彌補這個缺口的。

值得一看它的特性，看看你能用它完成什麼，例如你能夠在你的設計中使用自定義媒體查詢、自定義選擇器、顏色修改器、SVG過濾器和新的僞類。

PreCSS

PreCSS是一個postcss插件，工做方式相似於css預處理器。它能夠利用樣式文件中的標記之類的SASS。

經過在工做流中引入PreCSS，您能夠在CSS代碼中使用變量if else語句、for循環、mixin、@extend和@import規則、嵌套和許多其餘方便的功能。PreCSS的Github文檔爲您提供瞭如何充分利用它的詳細說明。

StyleLint

StyleLint是一個現代的CSS Linter，它能夠校對和驗證您的CSS代碼。它使避免錯誤變得容易，並促使您遵循一致的編碼約定。

Stylelint瞭解最新的CSS語法，所以它能夠與前面提到的precss插件一塊兒使用。它還容許您進行本身的配置，甚至檢查設置是否有效。

PostCSS Assets

PostssAssets插件是一個方便的CSS文件資源管理器。若是您在URL路徑方面遇到問題，這是一個很好的選擇，由於PostSS資產將樣式表文件與環境變化隔離開來。

您須要定義加載路徑、相對路徑和基本路徑，插件將自動查找您須要的資源。例如，若是須要foobar.jpg圖像的正確URL，能夠編寫如下代碼：

body {
 background: resolve('foobar.jpg');
}
複製代碼

Postcss Assets還負責節省緩存，由於若是但願在修改資產時自動更改URL路徑，能夠將cachebuster變量設置爲true。這個智能插件還能夠計算圖像文件的尺寸（寬度和高度），甚至可使用預設比例調整它們的大小

CSSNano

若是您須要一個生產站點的優化和縮小的CSS文件，那麼有必要查看cssnano。它是一個模塊化的插件，由許多較小的單一責任PostSS插件組成。它不只執行基本的縮小技術，如刪除空白，還具備高級選項，使集中優化成爲可能。

除了許多其餘功能外，cssnano還可以從新調整z-index值、減小自定義標識符、轉換長度、時間和顏色值以及刪除過期的供應商前綴。

原文地址： www.hongkiat.com/blog/postcs…