千亿国际网站行者无疆

千亿国际网站|首页-正版登录 >成功案例

PostCSS深入學習設置選項

作者: 千亿国际网站   点击次数:    发布时间: 2019-10-31 09:43

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

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

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

CodePen已預先集成了PostCSS,并且還支持下面所列的PostCSS插件:

這些插件可以讓你支持未來的CSS語法、像Sass一樣的函數、注釋的刪除和代碼的縮寫等等。

首先在CodePen在線編輯器上點擊"NewPen"創建一個新的頁面。然后單擊CSS窗口左上角的小齒輪圖標,在彈出的面板中設置。

單擊“CSSPreprocessor”下拉選項,你可以選擇下拉選項中的“PostCSS”選項。你也可以在"VendorPrefixing"中選擇“Autoprefixer”插件。

然后你可以點擊“Needanadd-on”按鈕,在彈出的面板中選擇你需要的插件。在彈出的面板將會顯示@規則插件,復制粘貼這些@規則對應的PostCSS插件到你的CSS面板中,并且開始使用。

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

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

首先,使用:root定義CSS變量。在CSS面板中添加像下面這樣的代碼:

這個時候你應該看到了預覽面板上的背景顏色變成了black。你也可以點擊CSS面板右上角的"ViewCompiled"按鈕看到生成的代碼:

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

在上面聲明的CSS變量中,修改--body_bg_color變量值,從black變成:

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

可以在CodePen以這種方式使用任何支持的PostCSS插件:

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

Prepros中可能沒有像CodePen中那么多插件可使用,但它包括了Autoprefixer和cssnext插件,可以在Prepros面板中選中,從而激活對應的PostCSS插件。你可以點擊這里下載Prepros。

打開Prepros面板,可以將項目拖到面板中,而且這個面板包括一個CSS文件。然后點擊CSS文件,將會在右邊打開一個設置面板。在這個面板中你可以看到Prepros支持的PostCSS插件,你可以選擇你想用的PostCSS插件。比如說你選擇Autoprefixer和cssnext表示你使用了PostCSS這兩個插件。

如上圖所示,你現在可以使用cssnext插件的所有功能以及Autoprefixed插件功能。

在CodePen中的CSS面板中激活PostCSS插件,然后通過引入@規則,就可以使用特定的PostCSS插件

Prepros提供了Autoprefixer和cssnext插件

在Prepros中點擊項目中任何CSS文件可以設置PostCSS給Prepros提供的PostCSS插件

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

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

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