Kompilator Less ke CSS

Kompilasikan Less ke CSS langsung di browser Anda dengan pratinjau langsung, evaluasi matematika, pratinjau source map, pemformatan output, tindakan salin dan unduh, serta perbandingan berdampingan antara Less vs CSS.

Sumber Less

// Variabel menggunakan prefiks @ di Less
@brand: #6d28d9;
@accent: #2563eb;
@surface: #ffffff;
@radius: 14px;
@gap: 1rem;

// Mixin (blok yang dapat digunakan kembali)
.soft-shadow(@color) {
  box-shadow: 0 16px 36px fade(@color, 16%);
}

// Mixin guard
.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);
    }
  }
}

Tip: Less menggunakan @variable (bukan $variable). Tempel bagian yang diimpor di atas kode ketika cuplikan Anda bergantung pada file lokal.

Pipeline kompilasi

Siap

Sumber Less

{ }

Pohon parse

f(x)

Evaluasi

CSS

CSS Browser

Format output

Mode matematika

Kompilasi langsung
Kompilasi ulang saat Anda mengedit. Unit ketat
Blokir kesalahan matematika unit campuran.

Muat file .less

File dibaca secara lokal oleh browser Anda dan dimasukkan ke dalam editor.

Menunggu kompilator Less.

Kompilasi pertama dimulai setelah Less.js siap.

Referensi cepat sintaks Less

Variabel@brand: #6d28d9;

Mixin.shadow() { ... }

Matematika@radius - 4px

Fungsifade(@brand, 18%)

Nesting&:hover { ... }

Guardwhen (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', 'Tambahkan kode Less sebelum mengompilasi.', 'Tempel sumber Less atau klik tombol awal cepat di atas.'); setFlow('source', {error: true}); return; } waitForLess(function () { setFlow('parse'); setStatus('pending', 'Mengompilasi Less...', 'Less.js sedang mengurai dan mengevaluasi kode Anda di browser Anda.'); 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', 'Berhasil dikompilasi.', 'Memakan waktu ' + Math.round(elapsed) + ' ms. Klik tampilan diff untuk melihat Less vs CSS secara berdampingan.'); }).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 : 'Periksa sintaks Less dan coba lagi.'; var loc = ''; if (err && (err.line || err.line === 0)) { loc = ' Baris ' + (err.line + 1) + (err.column !== undefined ? ', kolom ' + (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', 'Kesalahan kompilasi.', 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 = '✓ Disalin'; 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', 'File tidak dapat dibaca.', 'Pilih file .less dengan format UTF-8 dan coba lagi.'); }; reader.readAsText(file); }); updateMetrics(''); renderPreview(''); renderDiff(source.value || '', ''); setFlow('source'); compileLess(); })(); });

Embed Kompilator Less ke CSS Widget

Output CSS yang dikompilasi

CSS yang dihasilkan, pratinjau langsung, perbandingan berdampingan, dan ekspor — semuanya tetap berada di halaman saat Anda mengedit.

0 Baris CSS

0 B Ukuran output

0 Blok aturan

0% Output / sumber

@ Sumber LessInput

{ } Output CSSHasil

Output CSS

Pratinjau & status

Menunggu kompilasi pertama.

CSS yang dikompilasi akan muncul di sini setelah Less.js siap.

Pratinjau menggunakan iframe sandbox agar gaya pengujian tidak bocor ke bagian halaman lainnya.

Tentang Kompilator Less ke CSS

Kompilator Less ke CSS ini mengubah kode sumber Less menjadi CSS standar langsung di dalam browser Anda, menggunakan mesin Less.js resmi. Alat ini dirancang untuk pengembang front-end, desainer, pelajar, dan tim konten yang membutuhkan cara cepat untuk menguji variabel, mixin, nesting, aritmatika, fungsi warna, dan mixin guard tanpa harus menjalankan pipeline build yang lengkap.

Jawaban singkat: Tempel kode Less di sebelah kiri, pilih format output dan mode matematika, klik Kompilasi Less, lalu salin atau unduh CSS yang dihasilkan. Gunakan tab Diff Less vs CSS untuk melihat secara tepat bagaimana setiap fitur Less diterjemahkan ke CSS biasa — cara terbaik untuk mempelajari Less atau memigrasikan stylesheet lama.

Cara Penggunaan

Tempel kode Less: Tempel sumber Less Anda ke dalam editor di sebelah kiri, atau klik salah satu contoh awal cepat (Token desain, Pustaka mixin, Matematika & unit, Fungsi warna, atau Mixin guard).
Pilih opsi kompilasi: Pilih format output (Diperluas agar mudah dibaca, Dikompresi untuk diminifikasi) dan sesuaikan Mode matematika atau pilihan Unit ketat jika kode Anda membutuhkannya.
Kompilasi Less: Klik Kompilasi Less untuk menjalankan mesin Less.js resmi di dalam browser Anda. Dengan Kompilasi langsung diaktifkan, hasilnya juga akan diperbarui secara otomatis saat Anda mengetik.
Tinjau CSS: Baca CSS yang dihasilkan, pindai metrik kompilasi (baris, ukuran output, blok aturan, rasio ukuran), buka tampilan diff, dan periksa bingkai pratinjau langsung yang di-sandbox.
Salin atau unduh: Salin CSS yang dikompilasi ke papan klip Anda dengan satu klik, atau unduh sebagai file .css yang siap digunakan.

Apa yang Membuat Kompilator Less Ini Berbeda

Pipeline kompilasi yang dianimasikan: Saksikan kode sumber Anda berjalan melalui Penguraian → Evaluasi → CSS, dengan tahap aktif yang disorot secara real time dan tahap yang gagal ditandai dengan warna merah.
Tampilan diff berdampingan: Beralih dari CSS mentah ke tata letak Less-vs-CSS yang menunjukkan secara tepat fitur Less mana (variabel, mixin, matematika, fungsi warna) yang menghasilkan aturan CSS tertentu.
Lima pilihan cuplikan awal: Setiap contoh awal menargetkan konsep Less yang berbeda (token, mixin, matematika, fungsi warna, mixin guard) sehingga Anda dapat belajar atau membandingkan tanpa menulis kode pengaturan dari awal.
Peringatan cerdas: Tip bawaan akan muncul ketika kode Anda menggunakan @import di browser, pembagian tanpa tanda kurung dalam mode matematika Less 4, atau properti yang mungkin memerlukan prefiks vendor dalam produksi.
Bingkai pratinjau langsung yang di-sandbox: CSS yang dikompilasi diterapkan di dalam iframe terisolasi sehingga tidak pernah memengaruhi bagian MiniWebtool lainnya, dan Anda tetap mendapatkan pemeriksaan visual yang valid.
Metrik kompilasi dengan rasio: Lihat tidak hanya ukuran output, tetapi juga bagaimana perbandingannya dengan sumber Less Anda — sangat berguna saat menilai dampak mode dikompresi atau pemfaktoran ulang kode.

Lembar Contekan Less vs SCSS vs CSS

Fitur	Less	SCSS (Sass)	CSS Biasa
Variabel	`@brand: #6d28d9;`	`$brand: #6d28d9;`	`--brand: #6d28d9;`
Mixin	`.shadow(@c) { ... }`	`@mixin shadow($c) { ... }`	—
Gunakan mixin	`.shadow(#000);`	`@include shadow(#000);`	—
Fungsi warna	`darken(@brand, 10%)`	`darken($brand, 10%)`	`color-mix(...)`
Kondisional	Mixin guard `when (...)`	`@if` / `@else`	—
Matematika	`(@base * 1.5)`	`$base * 1.5`	`calc(var(--base) * 1.5)`
Kompilator	Less.js (alat ini)	Dart Sass, sass.js	—

Penjelasan Mode Matematika Less

Less 4 mengubah cara penguraian aritmatika, yang terkadang mengejutkan para pengembang yang memigrasikan cuplikan kode lama. Gunakan pemilih Mode matematika di panel opsi:

Pembagian dengan tanda kurung (default): Semua matematika berjalan tanpa tanda kurung kecuali pembagian, yang harus dibungkus dalam tanda kurung — misalnya (@base / 2). Ini menghindari pembagian yang tidak disengaja pada nilai shorthand seperti font: 10px/14px.
Selalu: Perilaku warisan Less 3 — setiap operator (termasuk /) berjalan tanpa tanda kurung. Beralihlah ke mode ini saat mengompilasi basis kode yang lebih lama.
Ketat: Hanya ekspresi di dalam tanda kurung yang diperlakukan sebagai matematika. Berguna ketika Anda menginginkan aritmatika yang sepenuhnya dapat diprediksi dan tidak ingin Less menebak-nebak.

Pasangkan ini dengan pilihan Unit ketat untuk memblokir operasi antara unit yang tidak kompatibel (misalnya 10px + 2%), yang merupakan sumber umum dari bug tersembunyi.

Fitur Less Umum yang Didukung

Variabel: @radius: 14px; yang dirujuk di mana saja di dalam file.
Nesting & pemilih induk: &:hover, &__badge, aturan yang bersarang dalam.
Mixin: blok yang dapat digunakan kembali .shadow(@color), ditambah mixin guard untuk output kondisional.
Fungsi warna: darken(), lighten(), fade(), spin(), mix(), dan banyak lagi.
Matematika: aritmatika dengan unit (@gap * 1.5, @radius - 4px), yang diatur oleh Mode matematika.
Loop & rekursi: mixin rekursif untuk menghasilkan class utilitas atau kolom kisi.
Fungsi: unit(), lightness(), extract(), length(), dan rangkaian fungsi Less lengkap.

Batasan Kompilasi Browser

Kompilasi browser sangat ideal untuk pemeriksaan cepat, pembelajaran, prototipe, dan cuplikan peninjauan kode — tetapi tidak dapat menjangkau sistem file proyek Anda. Pernyataan @import yang merujuk pada bagian lokal akan gagal kecuali Anda menempelkan bagian tersebut secara langsung ke dalam editor di atas kode yang menggunakannya. Untuk rilis produksi, jalankan pipeline build normal Anda sehingga Anda mendapatkan autoprefixing, resolusi @import lengkap, source map, dan minifikasi yang disesuaikan untuk bundler Anda.

Studi Kasus Penggunaan

Migrasi: Menempelkan Less lama dari Bootstrap 3 atau sistem desain lama dan memeriksa CSS yang dikompilasi untuk merencanakan porting.
Pembelajaran: Mengganti preset untuk melihat bagaimana satu konsep Less (matematika, mixin, guard, fungsi warna) dipetakan ke CSS biasa.
Peninjauan kode: Memverifikasi dengan cepat bahwa perubahan Less menghasilkan output yang diharapkan sebelum menggabungkan PR.
Dokumentasi: Menghasilkan sampel CSS untuk postingan blog, wiki internal, atau serah terima komponen.
Debugging: Mengisolasi aturan Less yang bermasalah di luar build lengkap Anda untuk memastikan apakah bug tersebut ada pada kode Anda atau pada toolchain.

FAQ

Apa itu kompilator Less ke CSS?

Kompilator Less ke CSS mengubah kode sumber Less (yang menggunakan variabel, mixin, nesting, dan aritmatika) menjadi CSS standar yang dapat dirender oleh browser. Less sendiri adalah preprosesor CSS yang diperkenalkan pada tahun 2009 dan digunakan secara luas di Bootstrap 3 dan banyak sistem desain.

Apakah kompilator berjalan di browser saya?

Ya. Mesin Less.js resmi dimuat ke dalam browser Anda dan mengompilasi sumber secara lokal. Kode Less Anda tidak diunggah ke server MiniWebtool selama penggunaan normal.

Apa perbedaan antara Less dan Sass atau SCSS?

Less menggunakan prefiks @ untuk variabel (misalnya @brand) dan awalnya ditulis dalam Ruby kemudian di-porting ke JavaScript. SCSS menggunakan $ untuk variabel (misalnya $brand) dan merupakan bagian dari ekosistem Sass. Keduanya mendukung nesting, mixin, dan aritmatika, tetapi sintaks dan nama fungsinya berbeda. Alat ini hanya mengompilasi Less; untuk Sass, gunakan Kompilator SCSS ke CSS kami.

Apakah alat ini dapat menangani pernyataan @import?

Kompilasi browser tidak dapat membaca file proyek pribadi. Tempel bagian Less yang diimpor secara langsung ke dalam editor saat menguji cuplikan kode yang bergantung pada jalur file lokal. Untuk resolusi @import yang lengkap, jalankan kompilasi di dalam pipeline build Anda.

Mengapa saya mendapatkan hasil yang salah dari ekspresi matematika?

Less 4 secara default menggunakan pembagian dengan tanda kurung (parens-division) dan matematika tidak ketat. Bungkus pembagian dalam tanda kurung, atau aktifkan Matematika ketat di panel opsi sehingga semua aritmatika hanya berjalan di dalam tanda kurung. Pilihan Unit ketat memblokir operasi antara unit yang tidak kompatibel seperti px dan %.

Apakah CSS yang dikompilasi siap untuk produksi?

CSS yang dihasilkan sangat bagus untuk pengujian cepat, prototipe, pembelajaran, dan cuplikan kode kecil. Untuk penggunaan produksi, jalankan pipeline build normal Anda sehingga Anda mendapatkan autoprefixing, minifikasi, source map, dan resolusi @import yang lengkap.

Dapatkah saya mengompilasi file `.less` lengkap dari disk saya?

Ya — gunakan input Muat file .less di panel opsi. Browser Anda membaca file secara lokal dan memasukkan isinya ke dalam editor; tidak ada yang diunggah. Jika file menggunakan @import untuk menarik bagian lain, tempel bagian tersebut di atas kode yang mengimpor agar dapat diselesaikan.

Kutip konten, halaman, atau alat ini sebagai:

"Kompilator Less ke CSS" di https://MiniWebtool.com/id/kompilator-less-ke-css/ dari MiniWebtool, https://MiniWebtool.com/

oleh tim MiniWebtool. Diperbarui: 2026-05-24

Kompilator Less ke CSS

Tentang Kompilator Less ke CSS

Cara Penggunaan

Apa yang Membuat Kompilator Less Ini Berbeda

Lembar Contekan Less vs SCSS vs CSS

Penjelasan Mode Matematika Less

Fitur Less Umum yang Didukung

Batasan Kompilasi Browser

Studi Kasus Penggunaan

FAQ

Apa itu kompilator Less ke CSS?

Apakah kompilator berjalan di browser saya?

Apa perbedaan antara Less dan Sass atau SCSS?

Apakah alat ini dapat menangani pernyataan @import?

Mengapa saya mendapatkan hasil yang salah dari ekspresi matematika?

Apakah CSS yang dikompilasi siap untuk produksi?

Dapatkah saya mengompilasi file `.less` lengkap dari disk saya?

Peralatan untuk webmaster:

Alat unggulan:

Bantu kami dan jawab 3 pertanyaan cepat

Kompilator Less ke CSS

Tentang Kompilator Less ke CSS

Cara Penggunaan

Apa yang Membuat Kompilator Less Ini Berbeda

Lembar Contekan Less vs SCSS vs CSS

Penjelasan Mode Matematika Less

Fitur Less Umum yang Didukung

Batasan Kompilasi Browser

Studi Kasus Penggunaan

FAQ

Apa itu kompilator Less ke CSS?

Apakah kompilator berjalan di browser saya?

Apa perbedaan antara Less dan Sass atau SCSS?

Apakah alat ini dapat menangani pernyataan @import?

Mengapa saya mendapatkan hasil yang salah dari ekspresi matematika?

Apakah CSS yang dikompilasi siap untuk produksi?

Dapatkah saya mengompilasi file .less lengkap dari disk saya?

Peralatan untuk webmaster:

Alat unggulan:

Bantu kami dan jawab 3 pertanyaan cepat

Dapatkah saya mengompilasi file `.less` lengkap dari disk saya?