Less 到 CSS 编译器

浏览器 Less 工作台

编写 Less，使用 Less.js 在本地进行编译，然后预览、对比和导出 CSS。

正在加载 Less 编译器

◐设计令牌 ⚙混合库 ➕数学与单位 ◑颜色函数 ◧混合守卫

Less 源代码 // 变量在 Less 中使用 @ 前缀 @brand: #6d28d9; @accent: #2563eb; @surface: #ffffff; @radius: 14px; @gap: 1rem; // 混合（可重用的代码块） .soft-shadow(@color) { box-shadow: 0 16px 36px fade(@color, 16%); } // 混合守卫 .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 4 默认） 总是运算（传统行为） 严格（必须使用括号）

实时编译
在您编辑时自动重新编译。 严格单位
拦截混合单位导致的数学错误。

加载 .less 文件

文件将由您的浏览器在本地读取并载入编辑器中。

正在等待 Less 编译器。

Less.js 准备就绪后将开始首次编译。

Less 语法快速参考

变量@brand: #6d28d9;

混合.shadow() { ... }

数学运算@radius - 4px

函数fade(@brand, 18%)

嵌套&:hover { ... }

守卫when (lightness(@c) >= 50%)

⚡ 编译 Less ✕ 清空

'; } 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