Less to 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 to CSS 컴파일러 Widget