Less 到 CSS 編譯器

直接在您的瀏覽器中將 Less 編譯為 CSS，支援即時預覽、數學運算、來源對照表（Source Map）預覽、輸出格式化、複製與下載操作，以及 Less 與 CSS 的左右對比。

Less 到 CSS 編譯器

Less 原始碼

// 變數在 Less 中使用 @ 前綴

@brand: #6d28d9;

@accent: #2563eb;

@surface: #ffffff;

@radius: 14px;

@gap: 1rem;

// Mixin（可重複使用的區塊）

.soft-shadow(@color) {

box-shadow: 0 16px 36px fade(@color, 16%);

}

// Mixin 守衛 (Mixin guards)

.tone(@bg) when (lightness(@bg) >= 50%) {

color: #1e293b;

}

.tone(@bg) when (lightness(@bg) < 50%) {

color: #ffffff;

}

.compiler-demo {

display: grid;

gap: @gap;

padding: @gap * 1.25;

border-radius: @radius;

background: @surface;

border: 1px solid fade(@brand, 18%);

.soft-shadow(@brand);

&__badge {

display: inline-flex;

width: fit-content;

padding: 0.35rem 0.7rem;

border-radius: 999px;

color: @accent;

background: fade(@accent, 10%);

font-weight: 800;

}

&__button {

border: 0;

border-radius: @radius - 4px;

background: linear-gradient(135deg, @brand, @accent);

.tone(@brand);

padding: 0.75rem 1rem;

transition: transform .16s ease;

&:hover {

transform: translateY(-2px);

filter: saturate(1.15);

}

提示：Less 使用 @variable（而非 $variable）。如果您的程式碼片段依賴本地檔案，請將匯入的局部檔案內容貼到上方。

編譯管道

就緒

Less 原始碼

{ }

解析語法樹

f(x)

計算評估

CSS

瀏覽器 CSS

輸出格式

數學模式

即時編譯
編輯時自動重新編譯。嚴格單位
封鎖混合單位的數學錯誤。

載入 .less 檔案

檔案會由瀏覽器在本地讀取並放入編輯器中。

正在等待 Less 編譯器。

首次編譯將在 Less.js 準備就緒後開始。

Less 語法快速參考

變數 (Variable)@brand: #6d28d9;

混合碼 (Mixin).shadow() { ... }

數學運算 (Math)@radius - 4px

函數 (Function)fade(@brand, 18%)

巢狀結構 (Nesting)&:hover { ... }

守衛 (Guard)when (lightness(@c) >= 50%)

'; } function syntaxHighlight(text, lang) { if (!text) return ''; var html = escapeHtml(text); if (lang === 'less') { html = html.replace(/(@[-_a-zA-Z][-_a-zA-Z0-9]*)/g, '$1'); html = html.replace(/(\/\/[^\n]*)/g, '$1'); } else { html = html.replace(/(\/\*[\s\S]*?\*\/)/g, '$1'); html = html.replace(/(^|\n)(\s*)([\.#&\*:a-zA-Z][^\{\n]*)(\s*\{)/g, '$1$2$3$4'); } return html; } function renderDiff(lessText, cssText) { if (diffLess) diffLess.innerHTML = syntaxHighlight(lessText, 'less'); if (diffCss) diffCss.innerHTML = syntaxHighlight(cssText, 'css'); } function switchView(view) { if (!viewOutputBtn || !viewDiffBtn) return; var isDiff = view === 'diff'; viewOutputBtn.classList.toggle('is-active', !isDiff); viewDiffBtn.classList.toggle('is-active', isDiff); if (outputView) outputView.classList.toggle('is-hidden', isDiff); if (diffView) diffView.classList.toggle('is-visible', isDiff); } function compileLess() { var text = source.value || ''; var serial = ++compileSerial; if (!text.trim()) { lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(''); renderDiff('', ''); setStatus('error', '請在編譯前加入 Less 程式碼。', '請貼上 Less 原始碼或點擊上方的快速入門按鈕。'); setFlow('source', {error: true}); return; } waitForLess(function () { setFlow('parse'); setStatus('pending', '正在編譯 Less...', 'Less.js 正在您的瀏覽器中解析並評估您的程式碼。'); var opts = buildOptions(); var startTime = performance.now ? performance.now() : Date.now(); try { var promise = window.less.render(text, opts); if (promise && typeof promise.then === 'function') { promise.then(function (result) { if (serial !== compileSerial) return; var elapsed = (performance.now ? performance.now() : Date.now()) - startTime; lastCss = result.css || ''; output.value = lastCss; updateMetrics(lastCss); renderPreview(lastCss); renderWarnings(text); renderDiff(text, lastCss); setFlow('css'); setStatus('ok', '編譯成功。', '耗時 ' + Math.round(elapsed) + ' 毫秒。點擊差異檢視以並排查看 Less 與 CSS。'); }).catch(function (err) { if (serial !== compileSerial) return; handleError(err, text); }); } } catch (err) { handleError(err, text); } }, 0); } function handleError(err, text) { var msg = err && err.message ? err.message : '請檢查 Less 語法並重試。'; var loc = ''; if (err && (err.line || err.line === 0)) { loc = ' 第 ' + (err.line + 1) + ' 行' + (err.column !== undefined ? '，第 ' + (err.column + 1) + ' 欄' : '') + '。'; } var failedStep = /parse/i.test(String(err && err.type)) ? 'parse' : 'eval'; lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(text); renderDiff(text, ''); setStatus('error', '編譯錯誤。', msg + loc); setFlow(failedStep, {error: true}); } function scheduleCompile() { if (!autoCompile.checked) return; window.clearTimeout(compileTimer); compileTimer = window.setTimeout(compileLess, 360); } function copyText(text, button) { if (!text) return; function done() { var old = button.textContent; button.textContent = '✓ 已複製'; window.setTimeout(function () { button.textContent = old; }, 1200); } if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(done).catch(function () { fallbackCopy(text); done(); }); return; } fallbackCopy(text); done(); } function fallbackCopy(text) { var temp = document.createElement('textarea'); temp.value = text; temp.setAttribute('readonly', 'readonly'); temp.style.position = 'fixed'; temp.style.left = '-9999px'; document.body.appendChild(temp); temp.select(); try { document.execCommand('copy'); } catch (e) {} document.body.removeChild(temp); } function downloadCss() { if (!lastCss) return; var blob = new Blob([lastCss], {type: 'text/css;charset=utf-8'}); var url = URL.createObjectURL(blob); var link = document.createElement('a'); link.href = url; link.download = 'compiled.css'; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); } document.querySelectorAll('[data-preset]').forEach(function (button) { button.addEventListener('click', function () { var preset = presets[button.getAttribute('data-preset')]; if (!preset) return; source.value = preset.code; compileLess(); }); }); source.addEventListener('input', scheduleCompile); outputStyle.addEventListener('change', compileLess); mathMode.addEventListener('change', compileLess); strictUnits.addEventListener('change', compileLess); autoCompile.addEventListener('change', function () { if (autoCompile.checked) compileLess(); }); compileButton.addEventListener('click', compileLess); clearButton.addEventListener('click', function () { source.value = ''; compileLess(); }); if (copyButton) copyButton.addEventListener('click', function () { copyText(lastCss || output.value, copyButton); }); if (downloadButton) downloadButton.addEventListener('click', downloadCss); if (viewOutputBtn) viewOutputBtn.addEventListener('click', function () { switchView('output'); }); if (viewDiffBtn) viewDiffBtn.addEventListener('click', function () { switchView('diff'); }); fileInput.addEventListener('change', function () { var file = fileInput.files && fileInput.files[0]; if (!file) return; var reader = new FileReader(); reader.onload = function () { source.value = String(reader.result || ''); compileLess(); }; reader.onerror = function () { setStatus('error', '無法讀取檔案。', '請選擇 UTF-8 編碼的 .less 檔案並重試。'); }; reader.readAsText(file); }); updateMetrics(''); renderPreview(''); renderDiff(source.value || '', ''); setFlow('source'); compileLess(); })(); });

Embed Less 到 CSS 編譯器 Widget

編譯好的 CSS 輸出

產生的 CSS、即時預覽、並排對比與匯出 — 編輯時所有內容都保持在頁面上。

0 CSS 行數

0 B 輸出大小

0 規則區塊

0% 輸出 / 原始碼

@ Less 原始碼輸入

{ } CSS 輸出結果

CSS 輸出

預覽與狀態

正在等待首次編譯。

一旦 Less.js 準備就緒，編譯後的 CSS 將顯示在此處。

此預覽使用沙箱化的 iframe，因此測試樣式絕不會外洩到頁面的其餘部分。

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/less-到-css-編譯器/，來自 MiniWebtool，https://MiniWebtool.com/

由 MiniWebtool 團隊製作。更新日期：2026-05-24

Less 到 CSS 編譯器

Less 到 CSS 編譯器

如何使用

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

Less vs SCSS vs CSS 綜合速查表

Less 數學模式詳解

支援的常見 Less 功能

瀏覽器端編譯的局限性

應用場景

常見問題 (FAQ)

什麼是 Less 到 CSS 編譯器？

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

Less 與 Sass 或 SCSS 有什麼區別？

它能處理 @import 陳述式嗎？

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

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

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

網站管理工具:

常用工具:

幫我們一個忙，回答3個快速問題

Less 到 CSS 編譯器

Less 到 CSS 編譯器

如何使用

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

Less vs SCSS vs CSS 綜合速查表

Less 數學模式詳解

支援的常見 Less 功能

瀏覽器端編譯的局限性

應用場景

常見問題 (FAQ)

什麼是 Less 到 CSS 編譯器？

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

Less 與 Sass 或 SCSS 有什麼區別？

它能處理 @import 陳述式嗎？

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

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

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

網站管理工具:

常用工具:

幫我們一個忙，回答3個快速問題

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