Kompiler Less ke CSS Daring
Kompilasi Less ke CSS di browser Anda. Variabel, struktur bertingkat, mixin, dan operasi diperluas menjadi CSS biasa oleh compiler resmi less.js sehingga Anda dapat memeriksa hasil tanpa memasang lessc.
Periksa CSS yang dihasilkan oleh variabel, struktur bertingkat, dan mixin Less.
Less
CSS
Kapan menggunakannya
- Periksa CSS yang dihasilkan oleh variabel, struktur bertingkat, dan mixin Less.
- Konversi file Less kecil untuk proyek yang menggunakan CSS biasa.
Cara penggunaan
- Tempelkan kode Less atau buka file .less.
- Pilih pengaturan prefiks vendor untuk browser target Anda.
- Tinjau CSS yang dihasilkan, lalu salin.
Masukan Less
@primary: #2563eb;
.button {
color: @primary;
&:hover { text-decoration: underline; }
}Keluaran CSS
.button {
color: #2563eb;
}
.button:hover {
text-decoration: underline;
}Detail dan batasan
Variabel yang tidak didefinisikan atau tanda kurung yang belum ditutup menghentikan kompilasi. Mulai dengan cuplikan pendek saat menelusuri kesalahan.
Kompilasi berjalan di browser Anda. @import URL eksternal dapat membuat browser mengambil sumber daya tersebut, jadi utamakan kode yang berdiri sendiri.
Impor file lokal lain, plugin Less, dan opsi compiler khusus proyek tidak tersedia. Prefiks vendor bergantung pada pengaturan browser target.
FAQ
Apakah ini sama dengan kompilasi menggunakan lessc?
Alat ini menggunakan less.js, compiler yang sama dengan lessc, sehingga file yang berdiri sendiri dikompilasi menjadi CSS yang sama dengan opsi default. Fitur proyek seperti impor lokal dan plugin tidak tersedia di sini.
Bisakah saya mengompilasi file yang menggunakan @import?
Impor yang mengarah ke file lain di komputer Anda tidak dapat diselesaikan di browser. Tempelkan kode yang diimpor secara langsung, atau kompilasikan seluruh proyek dengan lessc.
Apa perbedaan Less dan CSS?
Less adalah praprosesor CSS. Less menambahkan variabel, struktur bertingkat, mixin, dan fungsi, serta harus dikompilasi menjadi CSS sebelum dapat digunakan oleh browser.