The magic before CSS - Preprocessors

那些發生在 CSS 之「前」的魔法 —— 預處理器

前言

在前端開發領域，常常會聽見的一些預處理器 (Pre-processor)，像是 Sass、less、stylus，是什麼？為什麼存在？這篇文章主要會探討以下幾個重點 (附帶範例)：

在今天，撰寫存在於未來的 CSS

「CSS 處理器」的存在，其實主要就是為了彌補 CSS 開發上功能不盡理想的地方。在早期，並沒有複雜的邏輯與功能去撰寫可重複使用與好被管理的代碼，造成開發者們碰到了難管理、難擴增的難題，特別是在大型的專案事態變得更加混亂，於是出現了 CSS 處理器用於解決這樣的問題。

藉由預處理器延伸 CSS 的功能和語法來實現更為複雜的邏輯與更簡潔的代碼，例如 Variables、Functions、Mixins、Code Nesting……等，實踐 DRY 原則。

抑或是使用後處理器對現有的 CSS 做處理，來壓縮、修飾、更動現有的 CSS，例如 Import、Minification、Autoprefixer、CSS Nano……等

使撰寫 CSS 充滿可能性！

總結來說，預處理器幫助我們更好的撰寫 CSS，撰寫預處理器語言(可以想像成是撰寫富含語法糖的 CSS)再使用預處理器將它編譯為 CSS。

當然了，瀏覽器依舊還是只認得 CSS ，並不了解任何預處理器語言的語法。因此需要在使用時將預處理器的語法「預」處理為 CSS 來使用，儘管各種預處理器有自己定義的邏輯和語法，最終仍都是被轉譯為 CSS。

##　如何使用預處理器？

預處理器可以藉由套件管理器來安裝置專案中，或是使用現有的軟體像是： Prepros 都能達成相同目的，不過從入門的角度來說會推薦到 Codepen 設定使用 CSS Preprocessor🔗 來練習即可(可免費註冊)。

Sass 是目前最多人使用的預處理器(State of CSS 2021🔗)，同時也是最早出現的預處理器。有著廣大的社群和學習資源，是一款成熟穩定、充滿威力的預處理器。原先撰寫於 Ruby 語言，現今官方推薦使用全新的 Dart Sass🔗。

撰寫 Sass 的語法有兩種 —— SASS 或 SCSS，其中 SCSS 更貼近 CSS 的樣子，使用括弧與分號來嵌套語句，和規的 CSS 也意味著是和規的 SCSS 語法。

我個人更喜歡外貌上簡潔的 SASS，如果你特別厭煩寫 CSS 要打一堆與 ; 就選擇 SASS 吧！除此之外僅為撰寫上的習慣不同，它們依舊還是相同的東西。

如果還是不清楚的話，底下章節會以 Sass 作為預處理器的範例，解釋它提供的解決方案。

LESS 是一款撰寫於 Javascript 的預處理器，無疑是 Sass 主要的競爭對手，提供了。不過自從 Bootstrap 於第四版更換它們的預處理器為 Sass 後就較少人使用了。

Stylus 是一款撰寫於 Node JS 的預處理器，更小眾，使用的人比例更少，不過偶而還是會出現因此在這裡標註一下。

解釋完了預處理器的好處，也要了解什麼場合，你不應該用它。

前端開發的世界一直在變換，一個專案新增多餘的依賴 (Dependency) 並不是一件好事；而非原生的代碼可能在某一天就被原生所取代了，代表可能未來某一天某些預處理器提供的功能被趕上，可能需要再重構一遍代碼。

預處理器施作 CSS 在一個更高的抽象級別，可能不了解的人需要花費成本來去維護你的代碼，營造一個更複雜的開發環境，投入額外的時間成本學習。

使用以上這些功能還需要安裝配置與學習，不如直接開始寫 CSS 就好。

最終，要不要使用預處理器？要使用哪一款？關係到團隊與個人的偏好或專案的規模來決定，精進 CSS，不管哪款預處理器都能樣樣通。