Kompilator Less do CSS

Środowisko Less w przeglądarce

Pisz w Less, kompiluj lokalnie za pomocą Less.js, a następnie przeglądaj, porównuj i eksportuj CSS.

Ładowanie kompilatora Less

◐Tokeny projektowe ⚙Biblioteka domieszek ➕Matematyka i jednostki ◑Funkcje kolorów ◧Strażnicy domieszek

Źródło Less // Zmienne w Less używają prefiksu @ @brand: #6d28d9; @accent: #2563eb; @surface: #ffffff; @radius: 14px; @gap: 1rem; // Domieszka (blok wielokrotnego użytku) .soft-shadow(@color) { box-shadow: 0 16px 36px fade(@color, 16%); } // Strażnicy domieszek (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); } } }

Wskazówka: Less używa zapisu @zmienna (a nie $zmienna). Wklej importowane pliki cząstkowe powyżej kodu, jeśli Twój fragment zależy od lokalnych plików.

Potok kompilacji

Gotowy

@

Źródło Less

{ }

Drzewo składniowe

f(x)

Ewaluacja

CSS

Przeglądarkowy CSS

Format wyjściowy Rozszerzony (czytelny) Skompresowany (zminifikowany)

Tryb matematyczny Dzielenie w nawiasach (domyślny Less 4) Zawsze (przestarzały) Ścisły (wymagane nawiasy)

Kompilacja na żywo
Kompiluj ponownie podczas edycji. Ścisłe jednostki
Blokuj błędy matematyczne mieszanych jednostek.

Załaduj plik .less

Pliki są odczytywane lokalnie przez przeglądarkę i umieszczane w edytorze.

Oczekiwanie na kompilator Less.

Pierwsza kompilacja rozpocznie się, gdy Less.js będzie gotowy.

Szybka ściągawka ze składni Less

Zmienna@brand: #6d28d9;

Domieszka.shadow() { ... }

Matematyka@radius - 4px

Funkcjafade(@brand, 18%)

Zagnieżdżanie&:hover { ... }

Strażnikwhen (lightness(@c) >= 50%)

⚡ Skompiluj Less ✕ Wyczyść

'; } 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', 'Dodaj kod Less przed kompilacją.', 'Wklej źródło Less lub kliknij przycisk szybkiego startu powyżej.'); setFlow('source', {error: true}); return; } waitForLess(function () { setFlow('parse'); setStatus('pending', 'Kompilowanie Less...', 'Less.js analizuje i ocenia Twój kod w przeglądarce.'); 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', 'Skompilowano pomyślnie.', 'Operacja zajęła ' + Math.round(elapsed) + ' ms. Kliknij zakładkę porównania, aby zobaczyć Less i CSS obok siebie.'); }).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 : 'Sprawdź składnię Less i spróbuj ponownie.'; var loc = ''; if (err && (err.line || err.line === 0)) { loc = ' Linia ' + (err.line + 1) + (err.column !== undefined ? ', kolumna ' + (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', 'Błąd kompilacji.', 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 = '✓ Skopiowano'; 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', 'Nie można odczytać pliku.', 'Wybierz plik .less w kodowaniu UTF-8 i spróbuj ponownie.'); }; reader.readAsText(file); }); updateMetrics(''); renderPreview(''); renderDiff(source.value || '', ''); setFlow('source'); compileLess(); })(); });

Embed Kompilator Less do CSS Widget