🎨 Compiler LESS ke CSS

Tempelkan kode LESS untuk mengompilasinya menjadi CSS secara instan menggunakan engine resmi less.js. Mendukung variabel (@var), nesting, mixin, operasi, dan fungsi bawaan.

🔒 Kompilasi berjalan sepenuhnya di browser Anda — kode Anda tidak pernah dikirim ke server. Bahkan bundle less.js disajikan dari situs ini, bukan dari CDN.

Input LESS

Output CSS

Alat developer lainnya

🧾 JSON Formatter 🗄️ SQL Formatter ⚛️ Konverter SVG → JSX

PANDUAN

Pelajari lebih lanjut

1. Apa itu LESS

LESS (Leaner Style Sheets) adalah preprocessor CSS yang menambahkan fitur pemrograman — variabel, nesting, mixin, dan operasi — di atas CSS. Browser hanya memahami CSS biasa, jadi LESS harus dikompilasi menjadi CSS sebelum deployment. Alat ini menjalankan engine resmi less.js di browser Anda untuk melakukan konversi itu secara instan.

2. Fitur utama

Kelola warna dan ukuran di satu tempat dengan variabel (@brand: #4A90D9;), lalu cerminkan struktur markup Anda dengan nesting selector. Bangun blok gaya yang dapat digunakan kembali dengan mixin (.rounded(6px)), dan gunakan aritmetika seperti (@pad * 2) serta fungsi warna bawaan seperti darken() dan lighten().

3. Kompilasi di browser dan keamanan

Alat ini mengompilasi sepenuhnya di browser Anda dan tidak pernah mengunggah input Anda. Demi keamanan, fitur inline-JavaScript LESS (sintaks backtick) dinonaktifkan, sehingga berjalan dengan aman tanpa eval. Untuk proyek besar, integrasikan LESS ke pipeline build Anda (webpack, Vite, lessc, dll.).

Pertanyaan umum

Apakah kode LESS saya dikirim ke server?

Tidak. Kompilasi terjadi sepenuhnya di JavaScript browser Anda dan kode tidak pernah dikirim ke mana pun.

Bisakah saya menggunakan @import untuk memuat file eksternal?

Di browser, akses ke file eksternal dibatasi, jadi @import remote bisa gagal. Alat ini paling cocok untuk mengompilasi cuplikan satu file.

Bisakah saya menggunakan JavaScript inline LESS (backtick)?

Tidak. Fitur evaluasi JavaScript dinonaktifkan demi keamanan. Semua fitur standar — variabel, mixin, operasi — tetap berfungsi normal.

Apakah ini juga mengompilasi SCSS/Sass?

Tidak, alat ini hanya untuk LESS. LESS dan SCSS memiliki sintaks yang berbeda.