Konversi LESS ke CSS Online
Kompilasi kode LESS ke CSS murni di browser Anda. Tanpa npm, tanpa Node.js, tanpa konfigurasi.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Compiler LESS ke CSS
Mengapa menggunakan compiler LESS ini?
Konfigurasi nol
Tanpa npm, tanpa webpack, tanpa Grunt. Tempel kode LESS Anda dan dapatkan CSS secara instan.
less.js resmi
Menggunakan compiler less.js resmi. Kompatibilitas maksimal dengan standar LESS.
Privasi penuh
Kode LESS Anda tidak pernah dikirim ke server mana pun. Semua berjalan di browser Anda.
Proyek Bootstrap 3
Kompilasi tema Bootstrap 3 dan proyek legacy berbasis LESS lainnya dengan mudah.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Tempel kode LESS Anda
Tulis atau tempel kode LESS ke editor. Variabel @, nesting, mixin, dan operasi matematika didukung.
Kompilasi instan
CSS yang dihasilkan muncul secara otomatis. Compiler LESS.js berjalan secara lokal di browser Anda.
Salin atau unduh CSS
Salin CSS ke clipboard atau unduh sebagai file .css yang siap digunakan.
FAQ
Ada pertanyaan?
LESS yang dibuat Alexis Sellier dengan alias cloudhead pada 2009 dan SCSS yang merupakan bagian dari Sass yang dibuat pada 2006 adalah preprocessor CSS dengan filosofi berbeda. Perbedaan paling terlihat adalah sintaks variabel: LESS menggunakan @ yang merupakan awalan yang sama dengan at-rules CSS seperti @media sehingga dapat membingungkan, sementara SCSS menggunakan $. LESS dirancang untuk diproses baik di browser melalui less.js maupun di server. SCSS memiliki ekosistem yang lebih kaya termasuk Compass, Bootstrap 4+, dan Angular, serta compiler Dart Sass resmi. LESS tetap relevan terutama karena basis proyek legacy yang menggunakan Bootstrap 3 dan compiler JavaScript native-nya.
Variabel LESS didefinisikan dengan @nama: nilai; dan digunakan langsung: @base-color: #4d90fe; @font: Roboto, sans-serif; color: @base-color. Fitur unik LESS adalah lazy evaluation: variabel dapat digunakan sebelum dideklarasikan dalam scope yang sama, karena LESS memproses seluruh file sebelum menyelesaikan nilai. Hal ini berbeda dengan SCSS di mana variabel mengikuti urutan deklarasi yang lebih ketat. Variabel LESS juga dapat diinterpolasi dalam selektor dan nama properti menggunakan sintaks @{nama}.
Mixin LESS didefinisikan sebagai kelas CSS biasa dan dipanggil dengan sintaks yang sama: .mixin() mendefinisikan mixin dan memanggilnya di dalam aturan lain menyertakannya. Tidak ada kata kunci @mixin seperti di SCSS. Ini berarti kelas CSS apa pun yang ada dapat digunakan sebagai mixin hanya dengan memanggilnya. Mixin berparameter menggunakan sintaks .mixin(@param: nilai-default). LESS juga mendukung mixin guard untuk kompilasi kondisional, yaitu fitur yang diimplementasikan SCSS dengan @if.
Tidak. Bootstrap 3 pada 2013 adalah momen adopsi masif LESS yang membuatnya dikenal oleh seluruh generasi pengembang web. Bootstrap 4 pada 2018 bermigrasi sepenuhnya ke SCSS, dan Bootstrap 5 pada 2021 melanjutkan dengan SCSS. Migrasi Bootstrap adalah salah satu faktor yang mengkonsolidasikan SCSS sebagai preprocessor dominan dalam ekosistem modern. Jika Anda memiliki proyek legacy dengan Bootstrap 3, alat ini dapat membantu mengekstrak CSS yang dikompilasi tanpa perlu mempertahankan lingkungan kompilasi LESS.
Alat ini mengompilasi kode LESS yang Anda berikan secara langsung, tetapi tidak dapat menyelesaikan referensi ke file eksternal melalui @import karena beroperasi di browser tanpa akses ke sistem file. Jika Anda memiliki beberapa file LESS, Anda dapat menggabungkannya secara manual sebelum mengompilasi. Untuk proyek dengan struktur modular yang kompleks, lingkungan kompilasi lokal dengan less.js atau integrasi LESS dalam bundler Anda seperti webpack, Vite, atau Parcel masih diperlukan.
LESS masih dibutuhkan dalam tiga konteks utama: memelihara proyek legacy dengan Bootstrap 3 atau tema WordPress, Magento, maupun Drupal yang menggunakan LESS; mengekstrak CSS dari potongan kode LESS yang ditemukan dalam kode warisan untuk dimigrasi ke CSS native atau SCSS; dan mempelajari sintaks LESS untuk bekerja dengan basis kode yang sudah ada. Untuk proyek baru, rekomendasi saat ini adalah SCSS/Sass atau langsung CSS modern dengan custom properties dan @layer.
LESS ke CSS online: kompilasi LESS tanpa npm atau Node.js, ideal untuk proyek Bootstrap 3
LESS adalah bahasa preprocessing CSS yang dibuat oleh Alexis Sellier yang dikenal secara online sebagai cloudhead dan diterbitkan pada 2009 sebagai perangkat lunak open source di bawah lisensi Apache. Awalnya ditulis dalam Ruby, penulisan ulangnya dalam JavaScript yaitu less.js pada 2010 adalah momen yang menentukan popularitasnya: untuk pertama kalinya, preprocessor CSS dapat berjalan langsung di browser dengan memuat file .less dan library less.js melalui tag script. Kemampuan kompilasi sisi klien ini, meskipun jarang digunakan dalam produksi karena alasan performa, mendemokratisasi akses ke preprocessing CSS tanpa memerlukan infrastruktur build. Fitur utama LESS adalah pewarisannya langsung dari CSS di mana CSS apa pun yang valid adalah LESS yang valid, variabel dengan awalan @, nesting selektor dengan perilaku identik dengan SCSS, mixin sebagai kelas yang dapat dipanggil, operasi aritmatika langsung pada nilai, serta fungsi warna bawaan seperti lighten, darken, dan mix.
Dampak terbesar LESS pada ekosistem web datang melalui Bootstrap yang merupakan framework UI paling populer di dunia. Bootstrap 2 pada 2012 dan Bootstrap 3 pada Agustus 2013 menggunakan LESS sebagai sistem kustomisasi dan kompilasi, memperkenalkan jutaan pengembang web ke sintaks LESS melalui sistem variabel dan mixin framework. Tema Bootstrap 3 didistribusikan sebagai koleksi file .less dengan variabel kustom yang mengompilasi CSS final. Integrasi ini menjadikan LESS preprocessor yang paling dikenal selama periode 2013-2018. Keputusan Bootstrap 4 yang dirilis stabil pada Januari 2018 untuk bermigrasi ke SCSS adalah titik balik definitif: proyek baru beralih ke SCSS dan LESS menjadi terutama terkait dengan pemeliharaan proyek legacy.
Kebutuhan compiler LESS online pada 2024 terkonsentrasi terutama dalam tiga skenario pemeliharaan dan migrasi. Pertama adalah ekosistem legacy Bootstrap 3: meskipun Bootstrap 5 sudah tersedia selama bertahun-tahun, banyak aplikasi enterprise dan situs WordPress masih menggunakan tema berbasis Bootstrap 3 dengan kustomisasi LESS. Ketika perlu mengekstrak CSS yang dikompilasi dari potongan kode tertentu atau memverifikasi output variabel atau mixin, melakukannya secara online lebih cepat daripada mempertahankan lingkungan kompilasi. Skenario kedua adalah migrasi dari LESS ke SCSS atau CSS modern: memahami CSS apa yang dihasilkan blok LESS tertentu adalah langkah pertama untuk menulisnya ulang dalam SCSS atau dengan native custom properties. Skenario ketiga melibatkan pemeliharaan tema Magento yang menggunakan LESS secara ekstensif dalam sistem temanya, tema Drupal tertentu, dan aplikasi yang dibangun di atas framework internal yang mengadopsi LESS selama periode 2012-2017. Convertir.ai menjalankan compiler less.js resmi di browser Anda tanpa mengirim baris kode apa pun ke server eksternal.