LessからCSSへのコンパイラー

ブラウザ内 Less ワークベンチ

Lessを記述し、Less.jsを使ってローカルでコンパイルします。CSSのプレビュー、比較、エクスポートが可能です。

Lessコンパイラーを読み込み中

◐デザイントークン ⚙ミックスインライブラリ ➕数学＆単位 ◑カラー関数 ◧ミックスインガード

Less ソース // Variables use the @ prefix in Less @brand: #6d28d9; @accent: #2563eb; @surface: #ffffff; @radius: 14px; @gap: 1rem; // Mixin (a reusable block) .soft-shadow(@color) { box-shadow: 0 16px 36px fade(@color, 16%); } // 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 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) + " ms。差分表示をクリックすると、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