7 個 PostCSS 插件讓你輕鬆步入 PostCSS

以前，咱們在 SitePoint 上屢次特刊了 PostCSS 內容，但它仍是難倒了不少人。一句話總結 PostCSS：

PostCSS 處理了不少你沒必要處理的乏味工做

它很巧妙的不一樣於預處理器，提供了可選的且更簡潔的編程語言，來編譯成 CSS，如 Sass、Less 與 Stylus。得出這個結論的部分緣由是：

• 它的名字。PostCSS 既能在預處理器將源代碼編譯成 CSS 以前也能在其以後對文件執行操做。
• PostCSS _能_替代你的預處理器。如今有不少插件實現了一些設計，如變量、 嵌套、mixins 以及 extends。

然而，雖然你能夠構建本身的預處理器，但除非你想限制功能並加快編譯速度，你沒有別的該這麼作的理由。就我我的而言，爲加強 CSS，我使用 Sass，再加以 PostCSS 輔佐。

如何使用 PostCSS？

PostCSS 能在獨立的 JavaScript 文件中使用，也能在 Gulp，Grunt，Broccoli，Brunch 還有不少我都沒聽過的任務運行器中使用

PostCSS 自己只負責將 CSS 解析爲 JavaScript 對象與詞元（token）。那些檢查、修改、添加或修改屬性與屬性值的插件的魔法發生在寫最終 CSS 文件以前。

爲了在 Gulp 中使用 PostCSS，你須要創建你的項目並安裝兩個模塊：

npm init
npm install --save-dev gulp gulp-postcss複製代碼

而後，你能夠繼續添加你須要的插件，如： autoprefixer 與 cssnano。

npm install --save-dev autoprefixer cssnano複製代碼

你能夠建立一個 gulpfile.js 文件。它定義了一個任務，加載 CSS 源文件而後經過 PostCSS 管道。插件以及任意所需的其它選項以一個數組傳給 PostCSS。最終，CSS 文件被輸出至目標文件。

// Gulp.js 配置var gulp = require('gulp'),
    postcss = require('gulp-postcss');// 應用 PostCSS 插件gulp.task('css', function() {  return gulp.src('src/main.css')
    .pipe(postcss([      require('autoprefixer')({}),      require('cssnano')
    ]))
    .pipe(gulp.dest('dest/main.css'));
});複製代碼

在控制檯，可以使用下面的命令運行該任務：

gulp css複製代碼

如今咱們只差一份方便的 PostCSS 插件列表了。

1. Autoprefixer

若是你不用其它插件，安裝 Autoprefixer。

npm install --save-dev autoprefixer複製代碼

隨着瀏覽器對規範的支持愈來愈好，供應商選擇替代方案如基於標記的屬性使能，特定瀏覽器前綴如 -webkit-、 -moz- 以及 -ms- 正逐漸消亡。不幸的是，你還沒法避免使用供應商前綴，但你很難知道哪些前綴是一直須要的（例如 user-select），哪些是偶爾須要的（例如 3D 轉換），哪些是從不須要的（例如 border-radius）。

有了 Autoprefixer，你再也不須要擔憂前綴選擇了。你只須要定義無前綴的 CSS，而後聲明你想支持的瀏覽器，Autoprefixer 將在添加必要前綴時查詢檢查 caniuse.com。下面的代碼指定了任意主流瀏覽器最新的 2 個版本，或者任何市場佔有率超過了 2% 的瀏覽器：

.pipe(postcss([  require('autoprefixer')({browsers: ['last 2 versions', '> 2%']
  })
]))複製代碼

在預處理器的庫函數中，這是一個高級選項，要求特殊的編碼方式，且會在任意狀況下都應用供應商前綴。隨着瀏覽器標準的進化，在將來運行 PostCSS 時，你添加了前綴的代碼將會被移除。

Autoprefixer 很是有用並廣爲流暢，可能你已經正在使用它卻沒有意識到它是一個 PostCSS 插件。

2. PostCSS Assets

PostCSS Assets 提供了不少實用的圖像處理函數：

npm install --save-dev postcss-assets複製代碼

它的選項包括：

• 歸約 URL： 經過給定文件名，PostCSS Assets 會使用根路徑或徹底合法的 URL 來替換 resolve(image)。
• 處理尺寸： PostCSS Assets 會使用一個等價的像素值來替換 width(image)， height(image) 或 size(image)。
• 內聯圖像： PostCSS Assets 會使用 Base64 編碼的字符串替換 inline(image)。
• 清除緩存： PostCSS Assets 會給圖像引用添加一個隨機的查詢字符串來確認加載的是最新的文件。

3. cssnext

cssnext 讓你如今就能使用最新的 CSS 語法。

npm install --save-dev postcss-cssnext複製代碼

這個插件有份很長的特性列表，包括：

• var 變量
• #rrggbbaa 顏色
• 顏色函數
• 過濾器
• 回退

當它執行時，cssnext 會將代碼翻譯成如今的瀏覽器支持的語法。

4. Rucksack

Rucksack 提供了不少函數，它的開發者宣稱，它們會使 CSS 開發再次有趣起來。

npm install --save-dev rucksack-css複製代碼

它的選項包括：

• 響應式的字體排版，僅需一個簡單的 font-size: responsive 聲明，就可以自動調整字體大小與行高。
• 大量僞選擇器，如 li:at-least(4)，選擇了任意含至少 4 個條目的列表。
• 屬性別名，如在你的 CSS 中使用 bg 代替 background，
• 大量預約義的緩動函數。

5. Stylelint

Stylelint 基於 140 個規則報錯，這些規則被設計用來捕獲常見錯誤，實現樣式協議並強制最佳實踐。有不少選項可用來依你的喜愛配置 Stylelint  —— Pavels Jelisejevs 的文章使用 PostCSS 提高你的 CSS 質量帶你走過搭建過程。

6. CSS MQPacker

MQPacker 在必要時會將你的媒體查詢成一個規則：

npm install --save-dev css-mqpacker複製代碼

預處理器如 Sass 能在一個聲明裏使用媒體查詢，很簡單，如：

.widget1 {
  width: 100%;

  @media (min-width: 30em) {
    width: 50%;
  }

  @media (min-width: 60em) {
    width: 25%;
  }
}

.widget2 {
  width: 100px;

  @media (min-width: 30em) {
    width: 200px;
  }
}複製代碼

這會編譯成：

.widget1 { width: 100%; }@media (min-width: 30em) {  .widget1 { width: 50%; }
}@media (min-width: 60em) {  .widget1 { width: 25%; }
}.widget2 { width: 100px; }@media (min-width: 30em) {  .widget2 { width: 200px; }
}複製代碼

爲了減少文件大小以及（儘量）提高解析時間，MQPacker 會將多個聲明打包到一個 @media 規則中，也就是：

.widget1 { width: 100%; }.widget2 { width: 100px; }@media (min-width: 30em) {  .widget1 { width: 50%; }  .widget2 { width: 200px; }
}@media (min-width: 60em) {  .widget1 { width: 25%; }
}複製代碼

可靠情報：確保你的代碼中第一個媒體查詢聲明按照你所想的順序定義了全部可能的選項，即便沒有實際的不一樣。這能保證 MQPacker 會以正確的順序定義規則。

MQPacker 也提供了選項來排序媒體查詢與輸出 sourcemap。

7. cssnano

cssnano 會壓縮你的 CSS 文件來確保在開發環境中下載量儘量的小。經過下面的命令安裝它：

npm install --save-dev cssnano複製代碼

這個插件經過移除註釋、空白、重複規則、過期的瀏覽器前綴以及作出其餘的優化來工做，通常能減小至少 50% 的大小。還有不少其它選擇，但 cssnano 是其中最好的一個。使用它！

還有什麼？

postcss.parts 上提供了可搜索的 PostCSS 插件索引， PostCSS 使用文檔 也提供了建議的選項列表。幾乎任何你能想到的 CSS 工做都能找到插件，但注意存在的交叉與重複的問題 —— 例如，cssnext 也包括 Autoprefixer。

若是那還不夠的話，你還能夠用 JavaScript 開發你本身的 PostCSS 插件。PostCSS 文檔講解了如何寫一個插件並提供了一份參考 API。

無論你是否使用預處理器，PostCSS 都使得 CSS 開發變得更簡單了。它節省的 CSS 開發時間比爲最初的安裝與配置付出的努力重要多了。