看完了上一篇《為什麼要使用前處理器？》的各種安利，你應該已經躍躍欲試了吧！接下來我們來聊一聊，如何快速上手 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 跟前兩者相比已經沒啥優勢了。
第二步：瞭解功能
在選好你中意的預處理語言之後，我建議你開啟它的官網，大致瞭解一下它的主要功能和語法。
- Sass 官網：http://sass-lang.com/
- Stylus 官網：http://stylus-lang.com/
- Less 官網：http://lesscss.org/
在最開始接觸一門 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 檔案時，這個瀏覽器頁面都會自動更新，讓你看到最新的修改效果…………
……
……