🎨 LESS 轉 CSS 編譯器

貼上 LESS 程式碼，使用官方 less.js 引擎即時編譯成 CSS。支援變數（@var）、巢狀、mixin、運算與內建函式。

🔒 編譯完全在瀏覽器中執行——您的程式碼永遠不會傳送到伺服器。連 less.js 套件也是由本站提供，而不是透過 CDN。

LESS 輸入

CSS 輸出

瞭解更多

LESS（Leaner Style Sheets）是建立在 CSS 之上的 CSS 預處理器，加入了變數、巢狀、mixin 與運算等程式化功能。由於瀏覽器僅能理解純 CSS，因此 LESS 在部署前必須先編譯為 CSS。這個工具使用官方 less.js 引擎在您的瀏覽器中立即完成轉換。

透過變數（如 @brand: #4A90D9;）在同一地方管理顏色與尺寸，並以巢狀選擇器對應您的標記結構。使用 mixin（例如 .rounded(6px)）建立可重複使用的樣式區塊，並可使用像 (@pad * 2) 這類運算式，以及 darken()、lighten() 等內建色彩函式。

本工具完全在瀏覽器中編譯，且不會上傳您的輸入內容。為了安全性，LESS 的 inline-JavaScript 功能（反引號語法）已停用，因此可在不使用 eval 的情況下安全執行。對於大型專案，建議將 LESS 整合到建置流程中（webpack、Vite、lessc 等）。

我的 LESS 程式碼會被送到伺服器嗎？

不會。編譯完全在瀏覽器的 JavaScript 中進行，且程式碼從未傳送到任何地方。

我可以用 @import 載入外部檔案嗎？

在瀏覽器中，外部檔案存取會受到限制，因此遠端 @import 可能會失敗。本工具最適合用來編譯單一檔案片段。

我可以使用 LESS 內嵌 JavaScript（反引號）嗎？

不可以。為了安全性，已停用 JavaScript 評估功能。所有標準功能（變數、mixin、運算）都可正常使用。

它也可以編譯 SCSS/Sass 嗎？

不可以，這個工具僅支援 LESS。LESS 與 SCSS 的語法不同。