Less 到 CSS 編譯器
直接在您的瀏覽器中將 Less 編譯為 CSS,支援即時預覽、數學運算、來源對照表(Source Map)預覽、輸出格式化、複製與下載操作,以及 Less 與 CSS 的左右對比。
偵測到廣告封鎖,導致我們無法顯示廣告
MiniWebtool 依靠廣告收入免費提供服務。如果這個工具幫到你,歡迎升級 Premium(無廣告 + 更快),或將 MiniWebtool.com 加入允許清單後重新整理頁面。
- 或升級 Premium(無廣告)
- 允許 MiniWebtool.com 顯示廣告,然後重新載入
Less 到 CSS 編譯器
這款 Less 到 CSS 編譯器使用官方的 Less.js 引擎,直接在您的瀏覽器中將 Less 原始碼轉換為標準 CSS。它是專為前端開發人員、設計師、學生和內容團隊所設計,旨在提供一種快速測試變數、Mixins、巢狀結構、算術運算、顏色函數和 Mixin 守衛的方法,而無需啟動完整的建置管道。
快速入門:在左側貼上 Less 程式碼,選擇輸出格式和數學模式,點擊編譯 Less,然後複製或下載產生的 CSS。使用 Less vs CSS 差異標籤可以確切查看每個 Less 功能如何轉換為純 CSS — 這是學習 Less 或遷移舊版樣式表的絕佳方式。
如何使用
- 貼上 Less 程式碼:將您的 Less 原始碼貼到左側編輯器中,或點擊快速入門選單(設計 Token、Mixin 函數庫、數學與單位、顏色函數或 Mixin 守衛)。
- 選擇編譯選項:選擇輸出格式(展開格式適合閱讀,壓縮格式適合最小化生產),並根據您的程式碼需求調整「數學模式」或「嚴格單位」切換開關。
- 編譯 Less:點擊編譯 Less 即可在瀏覽器中執行官方 Less.js 引擎。在啟用「即時編譯」的情況下,結果還會隨著您的輸入自動更新。
- 檢查 CSS:閱讀產生的 CSS,瀏覽編譯指標(行數、輸出大小、規則區塊、大小比例),打開差異檢視,並檢查沙箱保護的即時預覽框架。
- 複製或下載:只需點擊一下即可將編譯好的 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 | SCSS (Sass) | 純 CSS |
|---|---|---|---|
| 變數 (Variable) | @brand: #6d28d9; | $brand: #6d28d9; | --brand: #6d28d9; |
| 混合碼 (Mixin) | .shadow(@c) { ... } | @mixin shadow($c) { ... } | — |
| 使用 Mixin | .shadow(#000); | @include shadow(#000); | — |
| 顏色函數 | darken(@brand, 10%) | darken($brand, 10%) | color-mix(...) |
| 條件判斷 | Mixin 守衛 when (...) | @if / @else | — |
| 數學運算 | (@base * 1.5) | $base * 1.5 | calc(var(--base) * 1.5) |
| 編譯器 | Less.js(本工具) | Dart Sass, sass.js | — |
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 來拉取局部檔案,請將這些局部檔案內容貼在匯入程式碼的上方以便其進行解析。
引用此內容、頁面或工具為:
"Less 到 CSS 編譯器" 於 https://MiniWebtool.com/zh-tw//,來自 MiniWebtool,https://MiniWebtool.com/
由 MiniWebtool 團隊製作。更新日期:2026-05-24