不專業的 JetPack CSS 前置處理器卜測 Jetpack CSS preprocessor Divination

在 WordPress 中，JetPack所提供的功能有一項叫做「自訂CSS：強化 CSS 自訂面板功能」，說明是「新增 CSS 前置處理器使用、停用佈景主題 CSS 或自訂圖片寬度的選項。」裡面的選項中有「無（不使用）」、「使用LESS」、「使用SASS（SCSS語法）」三個選項，面對不明朗也不熟悉的領域，就令到這篇紀錄的誕生。

首先到訪 Jetpack 的網頁閱讀他們的說明，以下為節錄的 Apple Safari 英中譯本：

自定義CSS編輯器允許您自定義主題的外觀，而無需建立子主題或擔心主題更新會覆蓋您的自定義。要啟用此功能，請訪問Jetpack → 設定 → 在網站儀表板上寫入。向下滾動到“主題增強”部分，然後切換“增強CSS自定義面板”選項。
從WordPress 4.7開始，您現在可以直接從自定義器將自定義CSS新增到自己的主題中。自定義當前主題時，只需選擇“附加CSS”選項卡即可開始！
Jetpack的自定義CSS功能允許您向CSS編輯器新增更多功能⋯⋯
預處理器：CSS編輯器支援CSS預處理器LESS和Sass（SCSS語法）。對於希望利用變數和mixins等CSS擴充套件的使用者來說，這是一個高階選項。有關更多資訊，請參閱LESS和Sass網站。
附加元件：在更改網站設計時，預設情況下，您將在現有主題樣式表之上新增自定義。但是，由於“開始新鮮”選項，您可以選擇將現有主題的樣式表替換為您自己的CSS。如果您只想從主題的HTML結構開始，並從頭開始重新建立其所有CSS，則應使用此第二個選項。參考主題的原始樣式表以供參考，並確保您已考慮所有規則/樣式。如果您缺少某些元素，部落格的公眾視野可能會出現偏差。只有編輯視窗中的CSS程式將使用此選項應用於您的部落格。
媒體寬度：如果您使用自定義CSS修改了主要內容區域的寬度，則應使用此選項。當將全尺寸影象插入到您的部落格中時，“媒體寬度”設定將用作預設大小。請注意，根據插入設定的方式，它不會影響您在更改設定之前新增的某些影象的大小，並且您可能必須在更改設定後重新插入其中一些影象。
Jetpack 支援主頁>外觀>自定義CSS

嚴格來說這不是說給用戶聽的，因為我想知道的是這兩個前置處理器到底會為我的網站帶來多大的價值。所以我又去 Google 了這兩項的分別，以下為網路的英文譯本節錄：（放心，可以快速略過的內容來的）

SASS 和 LESS 的區別

SASS 與 LESS 都是 CSS 或前置處理器的擴展方案。前置處理器是一種腳本語言用來擴展 CSS，然後將其編譯回常規 CSS。它們可以說是為更好的維護、主題和可擴展性而設計的編程語言。SASS 代表Syntactically Awesome Stylesheets (SASS)，LESS 代表 Leaner CSS (LESS)。SASS 基於 Ruby，而 LESS 使用 JavaScript。此外，LESS 讓用戶有機會在某些情況發生時激活 mixins。另一方面，SASS 提供了大多數編程語言都知道的循環和大小寫區別。讓我們詳細看看 SAS 與 LESS 之間的區別。

SASS 和 LESS 之間的主要區別

兩者都是市場上的熱門選擇；讓我們討論一些主要區別：

幫助 CSS3：SASS 提供指南針。指南針有助於提前處理情況。LESS 提供了一些提供營銷支持圖表的庫，並且與 SASS 相比非常強大。LESS 使得構建健壯的引用資料庫成為可能，並且可以在需要時重複使用。這有助於 CSS3 更加用戶友好。前置處理器軟件與這些引用資料庫保持同步。
語言能力：LESS 提供了創建受保護的混入的能力，這些混入僅在滿足某些條件時才起作用。例如，如果文本的顏色較淺，而用戶想要較暗的背景。為此，如果單個 mixin 分為兩部分，那麼這些守衛將看到只有一個需要的部分生效。另一方面，SASS 認為自然概念和穩健性更為重要，因此使用指南針可以實現這一點。例如，指南針中有一個名為背景的 mixin，它可以讓你傳遞任何你想得到的東西，它會在需要時輸出。
變量處理：聲明變量和處理它們有兩種不同的定義方式。LESS 使用 @ 而 SASS 使用 $。在 SASS 中，$ 沒有任何繼承意義，而 LESS 的 @ 表示應該發生繼承。在 SASS 中，如果一個全局變量被覆蓋並且全局變量取局部值。
處理媒體查詢：媒體查詢可用於將塊添加到主樣式表的底部。使用 SASS 或 LESS 時，用戶可以使用嵌套來組合樣式。在這方面，與 LESS 相比，SASS 提供了更好的效果。

比較的基礎	SASS	LESS
基本區別	SASS 是一個 CSS 前置處理器，有助於減少 CSS 中的重複並最終節省時間。它是 CSS 的擴展，有助於節省時間。它提供了一些可用於創建樣式表並幫助維護代碼的功能。它被認為是 CSS 的超集，用 Ruby 編碼。	LESS 也是一個 CSS 預處理器，它使用戶能夠自定義、維護、管理和重用網站的樣式表。LESS 是一種動態語言，可以在不同的瀏覽器上使用。LESS 是用 JavaScript 編寫的，編譯數據非常快。它還有助於保持代碼模塊化，使其可讀且易於更改。
特徵	以下是 SASS 的特點：它穩定、強大並且與其他版本的 CSS 兼容。它是 CSS 的超集，用 JavaScript 編寫。它有自己的語法，並且可以編譯為可讀的 CSS。它是開源的。	以下是LESS的特點：可以以更乾淨和有條理的方式編寫代碼。可以根據需要定義新樣式，並且可以隨時重複使用。它是在 JavaScript 上開發的，是 CSS 的超集。它是一種敏捷工具，有助於減少冗餘
錯誤	SASS 具有報告語法錯誤的能力。	LESS 在所有測試中都有更準確的錯誤消息，它還解釋了發生錯誤的正確位置。
功能	SASS 使您能夠創建自己的函數並將它們與用戶想要的上下文一起使用。可以使用函數名和任何參數調用函數。像 mixin 一樣，函數也可以全局訪問，也可以接受不同的參數。可以使用@return 返回值。	LESS 使用 JavaScript 來處理值。它還使用預定義的函數來操作 HTML 元素，並對樣式表的不同方面進行更改。它還具有更改顏色的功能，如圓形功能、地板功能、天花板功能和百分比功能。
混合	Mixins 有助於創建可以在樣式表中的任何地方使用和重用的樣式，而無需重新創建非語義類。在 SASS 中，mixin 可以存儲不同的值或參數並調用該函數。Mixin 還支持使用下劃線和連字符。定義一個 Mixin：@mixin 指令用於定義 mixin包含一個 Mixin：@include 用於在文檔中包含 mixin論據：SASS 腳本值被當作參數並且在其中可用。傳遞一個塊：樣式塊可以傳遞給mixin	在 LESS 中也使用 Mixin。在 LESS 中，mixin 可以嵌套。它還可以接受參數並返回不同的值。mixin 的範圍取決於調用者的範圍並且是可見的。Mixin 返回值：Mixin 也可以像函數一樣定義變量和返回值。另一個 Mixin 中的 Mixin：一個 mixin 可以在另一個 mixin 中使用，也可以用於返回值。
文檔	SASS 的文檔更側重於知識庫和設置。它沒有提供更多的視覺效果。	LESS 文檔具有吸引人的視覺效果。它還具有易於遵循的步驟。

SASS 與 LESS 比較表

這兩種前置處理器在網頁設計師中都很流行。SASS 用戶可以輕鬆選擇他們的語法，開發人員可以決定何時遠離 CSS 規則。另一方面，LESS 在某些情況下用戶可以激活 mixins 的功能方面具有優勢。SASS 還提供了程序員知道的循環和案例。因此，這完全取決於開發人員和他們喜歡哪種語言的項目要求。這兩種語言都有其優點和缺點。最後，選擇的一個提供了其中開發的最佳功能。

好了，我找到最有用的比較說明就是以上這些了，有看明白嗎？老實說，我完全看不到兩者的分別。有時候會搞不清楚 Automattic 到底是想讓事情變得簡單，還是網絡編程專業向這部份。反正都看不明白就了直接來吧～

提問：在這三個方案中，哪一個會為我的網站帶來最大的效益？

「不使用前置處理器」：ᛝ、ᚅ、寶劍皇后正位，這個組合可是後勁很大的一組，說明了如果不使用的話，接下來也會為用上其他接近的服務，所以即使現在選擇不使用，也是可以的，只是問題會無法解決。（其實可以直接一點不用那麼迂迴地解說咧～）
「使用 LESS 前置處理器」ᚫ、ᚌ、審判正位，這應該是正解了！！！！！全都指向了會變好耶！！！！！
「使用 SASS 前置處理器」ᚺ、ᚔ、國王逆位，這個有隱憂耶，抽出了Hagalaz我覺得還好，但紫杉在科技中我抽過都是不好的使用體驗，而且國王逆位也很有壓力，那答案就出現了喔！

在你看到這一篇廢文的時候，其實網站已經在用 LESS 作為前置處理器為網站提供服務了，在泓臻看來這是一個有用的方案，因為之前一些做不出來的效果不知怎麼的在啟用 LESS 後突然變得能用了，也希望網站的使用者們沒有因為啟用了 LESS 前置處理器方案而令瀏覽體驗變差，有的話請您留言告訴泓臻，讓我知道事情的細節並進一步優化，謝謝。

如果有需要泓臻補充的內容，歡迎在下面留言或寄送電子郵件予泓臻。