淺談 CSS 預處理器（二）：如何快速上手？

看完了上一篇《為什么要使用預處理器？》的各種安利，你應該已經躍躍欲試了吧！接下來我們來聊一聊，如何快速上手 CSS 預處理器。

在接觸 CSS 預處理器之前，你最好已經具備了一定的 CSS 基礎和實踐能力，比如你可以完成常見網頁的樣式和布局；另外，如果你有一些項目經驗就更好了，比如組織過整個網站的 CSS 文件、設計過 CSS 代碼的分層和復用等等。

因為，當你有了這方面的經驗之后，在學習 CSS 預處理器時，對它提供的功能會更有感觸，會更有針對性地解決過往 CSS 開發中的種種痛點。

好，接下來，魔法哥建議 “三步走”。

第一步：選擇語言

首先，你需要選定一門 CSS 預處理語言。目前主流的預處理語言主要是 Sass、Less 和 Stylus，它們的流行度差不多也是這個順序。

（圖片來源：ashleynolan.co.uk）

如果你比較保守，可以選擇 Sass（或它的變種 SCSS）。因為它相當成熟，用它的人也最多，比如 Bootstrap 4 就是用 Sass 寫的。你遇到的坑一般都已經有無數人趟過了，在網上比較容易找到 Sass 相關的文檔和教程。

如果你不喜歡隨大流，那我就要向你推薦 Stylus 了！與 Sass 和 Less 相比，Stylus 更像是一門編程語言，功能強大，語法靈活。同時，Stylus 完全由 JavaScript 實現，對 Node.js 工具鏈極為友好。目前百姓網主站和百度的部分業務在用 Stylus。

除了上述兩項以外，還有個 Less。不過這里就不多介紹了，因為在魔法哥看來，除了一些老項目還在用，Less 跟前兩者相比已經沒啥優勢了。

在選好你中意的預處理語言之后，我建議你打開它的官網，大致了解一下它的主要功能和語法。

在最開始接觸一門 CSS 預處理語言的時候，我們不需要立刻成為這門語言的專家。只需要把官方文檔快速掃一遍，建立一個整體的印象，為接下來的動手嘗試做好準備就可以了；同時多看看官方的示例代碼，找找感覺。

當你日后覺得有必要深入學習的時候，就要細嚼慢咽官方文檔了，同時還有必要找些教程或書籍來仔細研讀。

上面提到過，Sass 的資料最多，也有中文書。Stylus 目前還沒有中文書出版，不過張鑫旭老師翻譯了中文文檔，也寫過教程，都是不錯的學習資源。

走到這一步，你就可以找個地方放手實踐啦！找個一張網頁設計稿來寫寫看，或者翻出一個以前寫的 CSS 文件來改造一番：你可以試試用變更和 Mixin 來把重復的值和代碼片斷抽象出來，用嵌套來把代碼組織成一個個段落，在這個過程中逐漸熟悉這門預處理語言。

“慢著，你還沒說編譯的事兒呢！”

沒錯，要把預處理器代碼應用到瀏覽器環境，還需要操心編譯這一步。不過在上手階段，你可以先把配環境的事兒先放一放，因為你可以選擇那些開箱即用的環境，先玩起來再說。

如果你對編輯器沒啥特殊要求，可以嘗試像 JS Bin 或 CodePen 這樣的在線 demo 網站，它們通常都提供了實時的 CSS 預處理器編譯功能。

以 CodePen 為例，我們在新建一個 Pen 之后，點擊 CSS 窗格左上角的小齒輪按鈕，進入設置界面，在 “CSS Preprocessor” 一欄選擇你需要的語言就可以了（如下圖所示）。

當然如果你懶得設置的話，可以直接套用魔法哥已經配置好的 Pen 模板。打開 http://codepen.io/pen?template=QKQvRw 這個鏈接就可以直接寫 Stylus 代碼了！

如果你還是想在本機舒適的 IDE 里寫代碼，或者想嘗試用模塊來拆分代碼，那不妨試試魔法哥為你配置好的 Stylus 試用環境。

在 GitHub 上找到 cssmagic/stylus-playground 這個項目，按照 README 的介紹，把它下載到本地，然后運行一個簡單的啟動命令就可以開始玩了。

這個簡易的試用環境已經配置好了 Stylus 語言的編譯程序，默認加載 Normalize 和 CSS Reset，還加入了 Autoprefixer 為你的代碼自動添加瀏覽器前綴。此外，這個環境還設置了一些便利機制，幫助你回避一切與寫代碼無關的瑣事，只為讓你寫得舒服。

在運行啟動命令之后，你的瀏覽器會自動打開一個 HTML 頁面；然后每當你修改這個試用環境內的 HTML 文件或 Stylus 文件時，這個瀏覽器頁面都會自動更新，讓你看到最新的修改效果…………

……

完整文章已收錄到 “CSS魔法” 微信公眾號，掃碼立即訂閱：

copy; Creative Commons BY-NC-ND 4.0 | 我要訂閱 | 我要打賞

Tags: CSS

文章來源：https://github.com/cssmagic/blog/issues/74