Membuat frontend dengan bantuan less

Membuat frontend dengan bantuan less

Less merupakan salah satu css preprocessor. Less memudahkan kita jika kita akan menulis css pada project yang besar. selain itu, banyak pula css framework yang menggunakan less. Sehingga, jika ingin melakukan theming, kita hanya tinggal mengimpor dan mengoveride variabel.

Instalasi less

Kita perlu menginstall nodejs terlebih dahulu sebelum menginstall less.

Jika kita sudah memiliki nodejs terinstall pada mesin kita. Install less dengan command

Mengcompile file less menjadi css

Setelah kita berhasil menginstall less, kita bisa mulai mencoba melakukan compile less menjadi css.

pertama, kita buat suatu project sederhana dengan struktur seperti ini

Kemudian kita edit file style.less kita, tambahkan style, misal .container{ width: 1000px; }

Lalu kita compile stylesheet kita dengan perintah

lessc res/less/style.less pub/css/style.css

Maka less akan menterjemahkan style kita kedalam file css

Nesting

Nesting dalam less lebih praktis daripada jika kita menggunakan css biasa. kita bisa memasukkan selector kedalam style selector, dengan contoh sbb

lalu kita compile lagi less kita

lessc res/less/style.less pub/css/style.css

output dari css kita akan menjadi seperti ini

Menggunakan variabel di less

Variabel ini merupakan salah satu fitur yang paling berguna didalam less, dengan variabel, style kita akan lebih konsisten. Selain itu juga mempermudah jika suatu saat kita ingin melakukan theming pada aplikasi kita.

Kita akan coba mengaplikasikan value pada style kita sebelumnya ke dalam variabel

jika kita ganti value dari variabel kita, dan kita compile less, nilai value pada file css akan mengikuti variabel

Import

Dengan import kita bisa mengambil file .less lain kedalam style kita. Mari kita coba memisahkan variabel ke dalam file baru, lalu kita import ke dalam file kita.

buat file baru pada folder less, dengan nama _variable.less

kita tambahkan satu style tambahan untuk nantinya diimpor, _footer.less

dan pada style.less kita

output:

 

pada line ke 1-5 dia didapat dari _footer.less, sementara untuk value valuenya dia dapat dari _variable.less

Lalu apa lagi yang bisa dilakukan less? masih banyak lagi, looping, hitung hitungan, function, dsb. Tapi untuk postingan kali ini saya cukupkan sampai sini dulu, bye, terimakasih.

One Reply to “Membuat frontend dengan bantuan less”

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *