Less 到 CSS 編譯器

這款 Less 到 CSS 編譯器使用官方的 Less.js 引擎，直接在您的瀏覽器中將 Less 原始碼轉換為標準 CSS。它是專為前端開發人員、設計師、學生和內容團隊所設計，旨在提供一種快速測試變數、Mixins、巢狀結構、算術運算、顏色函數和 Mixin 守衛的方法，而無需啟動完整的建置管道。

如何使用

1. 貼上 Less 程式碼：將您的 Less 原始碼貼到左側編輯器中，或點擊快速入門選單（設計 Token、Mixin 函數庫、數學與單位、顏色函數或 Mixin 守衛）。
2. 選擇編譯選項：選擇輸出格式（展開格式適合閱讀，壓縮格式適合最小化生產），並根據您的程式碼需求調整「數學模式」或「嚴格單位」切換開關。
3. 編譯 Less：點擊編譯 Less 即可在瀏覽器中執行官方 Less.js 引擎。在啟用「即時編譯」的情況下，結果還會隨著您的輸入自動更新。
4. 檢查 CSS：閱讀產生的 CSS，瀏覽編譯指標（行數、輸出大小、規則區塊、大小比例），打開差異檢視，並檢查沙箱保護的即時預覽框架。
5. 複製或下載：只需點擊一下即可將編譯好的 CSS 複製到您的剪貼簿，或者將其下載為準備就緒的 .css 檔案。

是什麼讓這款 Less 編譯器與眾不同

• 動畫化編譯管道：觀看您的原始碼穿梭於「解析語法樹」→「計算評估」→「CSS」，執行中的階段會即時高亮顯示，任何失敗的階段則會標記為紅色。
• 並排差異檢視：從原始 CSS 切換到「Less vs CSS」佈局，精確顯示是哪些 Less 特性（變數、Mixins、數學、顏色函數）產生了對應的 CSS 規則。
• 精選五大入門程式碼片段：每個入門範例都針對不同的 Less 概念（Token、Mixins、數學、顏色函數、Mixin 守衛），讓您無需編寫初始設定代碼即可進行學習或對比。
• 智慧型警告提示：當您的程式碼在瀏覽器中使用 @import、在 Less 4 數學模式下進行無括號除法，或者使用了在生產環境中可能需要供應商前綴的屬性時，系統會顯示行內提示。
• 即時、沙箱化的預覽框架：編譯後的 CSS 會應用於隔離的 iframe 中，因此它絕不會影響 MiniWebtool 的其他部分，同時還能為您提供直觀的視覺健康檢查。
• 附帶比例的編譯指標：不僅能看到輸出大小，還能看到它與您的 Less 原始碼相比如何 — 這在評估壓縮模式或重構的效果時非常方便。

Less vs SCSS vs CSS 綜合速查表

Less 數學模式詳解

Less 4 更改了算術運算的解析方式，這有時會讓遷移舊程式碼片段的開發人員感到驚訝。請使用選項面板中的數學模式選擇器：

• 括號除法（預設）：除了除法以外的所有數學運算都可以在沒有括號的情況下執行，而除法必須用括號包裹 — 例如 (@base / 2)。這可以避免在諸如 font: 10px/14px 的簡寫屬性值中發生意外的除法運算。
• 一律計算 (Always)：繼承舊版 Less 3 的行為 — 每個運算子（包括 /）都可以在沒有括號的情況下執行。在編譯較舊的程式碼庫時請切換到此模式。
• 嚴格模式 (Strict)：只有括號內的運算式才會被視為數學運算。當您需要完全可預測的算術，並且不希望 Less 進行任何猜測時，這非常實用。

將此模式與嚴格單位切換開關配合使用，可以封鎖不相容單位（例如 10px + 2%）之間的運算，這是造成隱蔽錯誤（silent bugs）的常見根源。

支援的常見 Less 功能

• 變數 (Variables)：可在檔案中任何地方引用的 @radius: 14px;。
• 巢狀結構與父選擇器：&:hover、&__badge 以及深層巢狀的規則。
• Mixins：.shadow(@color) 可重複使用的區塊，外加用於條件輸出的 Mixin 守衛。
• 顏色函數：darken()、lighten()、fade()、spin()、mix() 等等。
• 數學運算：帶有單位的算術運算（@gap * 1.5、@radius - 4px），受數學模式控管。
• 迴圈與遞迴：遞迴 Mixins，用於產生工具類別（utility classes）或網格欄位。
• 核心函數：unit()、lightness()、extract()、length() 以及全套 Less 函數庫。

瀏覽器端編譯的局限性

瀏覽器端編譯非常適合用於快速檢查、學習、原型開發以及程式碼審查片段 — 但它無法深入存取您的專案檔案系統。引用本地局部檔案的 @import 陳述式將會失敗，除非您將這些局部檔案的內容直接貼到編輯器中消費程式碼的上方。對於生產發佈，請執行您正常的建置管道，以便獲得自動前綴、完整的 @import 解析、Source Maps 以及專為您的打包工具優化的最小化壓縮。

應用場景

• 專案遷移：貼上來自 Bootstrap 3 或舊版設計系統的舊 Less 程式碼，並檢查編譯後的 CSS 以規劃移植方案。
• 教學引導：切換預設範例，以查看單個 Less 概念（數學、Mixin、守衛、顏色函數）如何對應到純 CSS。
• 程式碼審查 (Code Review)：在合併 Pull Request 之前，快速驗證 Less 的修改是否產生了預期的輸出。
• 文件製作：為部落格文章、內部 Wiki 或元件交接產生範例 CSS。
• 除錯排除：在完整的建置環境之外隔離行為異常的 Less 規則，以確認錯誤是存在於您的程式碼中還是工具鏈中。

常見問題 (FAQ)

什麼是 Less 到 CSS 編譯器？

Less 到 CSS 編譯器可將 Less 原始碼（使用變數、Mixins、巢狀結構和算術運算）轉換為瀏覽器可以渲染的標準 CSS。Less 本身是 2009 年推出的一款 CSS 預處理器，廣泛應用於 Bootstrap 3 和許多設計系統中。

此編譯器是在我的瀏覽器中執行嗎？

是的。官方的 Less.js 引擎會載入至您的瀏覽器中並在本地進行原始碼編譯。在正常使用情況下，您的 Less 程式碼不會上傳到 MiniWebtool 伺服器。

Less 與 Sass 或 SCSS 有什麼區別？

Less 使用 @ 前綴來定義變數（例如 @brand），最初是用 Ruby 編寫，後來移植到 JavaScript。SCSS 則使用 $ 符號來定義變數（例如 $brand），並且是 Sass 生態系統的一部分。兩者都支援巢狀、Mixins 和算術運算，但語法和函數名稱有所不同。此工具僅編譯 Less；如需 Sass 編譯，請使用我們的 SCSS 到 CSS 編譯器。

它能處理 @import 陳述式嗎？

瀏覽器端編譯無法讀取私有專案檔案。在測試依賴本地檔案路徑的程式碼片段時，請將匯入的 Less 局部檔案直接貼到編輯器中。若需要完整的 @import 解析，請在您的建置管道中執行編譯。

為什麼我的數學運算式得出了錯誤的結果？

Less 4 預設採用括號除法和非嚴格數學模式。請將除法運算用括號包起來，或者在選項面板中開啟 嚴格數學模式，這樣所有的算術運算就只會在括號內執行。嚴格單位切換功能則會阻止不相容單位（例如 px 和 %）之間的運算。

編譯後的 CSS 可以直接用於生產環境嗎？

產生的 CSS 非常適合用於快速測試、原型設計、學習和小程式碼片段。若要用於生產環境，請執行您正常的建置管道，以便獲得自動前綴、壓縮、Source Maps 以及完整的 @import 解析。

我可以從我的磁碟中編譯完整的 .less 檔案嗎？

可以 — 請使用選項面板中的載入 .less 檔案輸入項。您的瀏覽器會在本地讀取檔案並將內容置入編輯器中；絕不會上傳任何內容。如果該檔案使用 @import 來拉取局部檔案，請將這些局部檔案內容貼在匯入程式碼的上方以便其進行解析。