PostCSS深入學習：設定選項

歡迎開啟我們PostCSS深入學習系列之快入門指南。在這些初級教程中，可以讓我們快速的瞭解PostCSS和如何最有效的使用PostCSS。

在這篇文章中，我們將先告訴你如何設定PostCSS選項，所以你現在開始使用PostCSS只要幾分鐘。接下來將告訴你如何在Codepen和Prepros中設定PostCSS。

馬上讓我們看看如何開始玩PostCSS。

CodePen中設定PostCSS

如果你是第一次接觸PostCSS，那麼通過CodePen來使用它是最快方式。

CodePen已預先整合了PostCSS，並且還支援下面所列的PostCSS外掛：

• cssnext
• postcss-simple-vars
• postcss-discard-comments
• postcss-custom-media
• postcss-media-minmax
• postcss-conditionals
• postcss-each
• postcss-for
• postcss-nested
• postcss-transform-shortcut

這些外掛可以讓你支援未來的CSS語法、像Sass一樣的函式、註釋的刪除和程式碼的縮寫等等。

首先在CodePen線上編輯器上點選”NewPen“建立一個新的頁面。然後單擊CSS視窗左上角的小齒輪圖示，在彈出的皮膚中設定。

單擊“CSS Preprocessor”下拉選項，你可以選擇下拉選項中的“PostCSS”選項。你也可以在”Vendor Prefixing“中選擇“Autoprefixer”外掛。

然後你可以點選“Need an add-on”按鈕，在彈出的皮膚中選擇你需要的外掛。在彈出的皮膚將會顯示@規則外掛，複製貼上這些@規則對應的PostCSS外掛到你的CSS皮膚中，並且開始使用。

CodePen用法的例子

讓多們看看如何在CodePen中使用PostCSS的外掛cssnext示例。

在CSS皮膚頂部，新增你想要的cssnext外掛程式碼：

有了這條程式碼，你將可以使用cssnext官網上描述的所有功能特性。比如，我們使用CSS的變數和函式給body設定一個background顏色。

首先，使用:root定義CSS變數。在CSS皮膚中新增像下面這樣的程式碼：

可以像下面的程式碼那樣呼叫CSS的變數：

這個時候你應該看到了預覽皮膚上的背景顏色變成了black。你也可以點選CSS皮膚右上角的”View Compiled“按鈕看到生成的程式碼：

接下來，假設我們想讓背景顏色不要是全黑色，想變亮一點。我們可以使用未來的語法修改顏色。

在上面宣告的CSS變數中，修改--body_bg_color變數值，從black變成:

這是一個lightness()函式，在black顏色上調20%的亮度，這個時候你可以看到背景顏色從黑色變成了深灰色。

可以在CodePen以這種方式使用任何支援的PostCSS外掛：

• 通過@規則引入你想要的使用的PostCSS外掛
• 根據外掛的指令在CSS皮膚中使用(在上面你能找到對應外掛使用說明的連結地址)

下面就是我們前面在CodePen中使用PostCSS得到的最終效果：

在Prepros中使用PostCSS

Prepros中可能沒有像CodePen中那麼多外掛可使用，但它包括了Autoprefixer和cssnext外掛，可以在Prepros皮膚中選中，從而啟用對應的PostCSS外掛。你可以點選這裡下載Prepros。

開啟Prepros皮膚，可以將專案拖到皮膚中，而且這個皮膚包括一個CSS檔案。然後點選CSS檔案，將會在右邊開啟一個設定皮膚。在這個皮膚中你可以看到Prepros支援的PostCSS外掛，你可以選擇你想用的PostCSS外掛。比如說你選擇Autoprefixer和cssnext表示你使用了PostCSS這兩個外掛。

如上圖所示，你現在可以使用cssnext外掛的所有功能以及Autoprefixed外掛功能。

總結一下

好吧，快速將上面的內容做個總結：

• 試著在CodePen或Prepros中使用PostCSS
• CodePen中提供了PostCSS十個外掛
• 在CodePen中的CSS皮膚中啟用PostCSS外掛，然後通過引入@規則，就可以使用特定的PostCSS外掛
• Prepros提供了Autoprefixer和cssnext外掛
• 在Prepros中點選專案中任何CSS檔案可以設定PostCSS給Prepros提供的PostCSS外掛

下一節：整合任務

CodePen和Prepros可以通過設定啟用PostCSS外掛。然而不利的一面是，你無法決定使用哪個外掛。

當你準備使用PostCSS更多你想要的外掛時，可以通過配置自己選擇的外掛。最容易的方法是通過gulp或grunt設定需要的PostCSS外掛任務，並且讓其跑起來。

在下一節中，你將可學習到如何在Glup或Grunt中配置PostCSS外掛任何，並且讓其跑起來為你所用。感興趣的同學，歡迎持續關注接下來的內容。(^_^)。