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
npm install -g less
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
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
.container { width: 1000px; h4 { font-size: 2em; &.disable { color: #eee; } } .section-main { background-color: #ccc; } }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@container_width: 1000px; @section_main_bg_color: #ccc; .container { width: @container_width; h4 { font-size: 2em; &.disable { color: #eee; } } .section-main { background-color: @section_main_bg_color; } }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@container_width: 1000px; @section_main_bg_color: #ccc;kita tambahkan satu style tambahan untuk nantinya diimpor, _footer.less
/*== ini bagian footer ==*/ footer{ background-color: @section_main_bg_color; } /*== akhir bagian footer ==*/dan pada style.less kita
@import "_variable.less" @import "_footer.less" .container { width: @container_width; h4 { font-size: 2em; &.disable { color: #eee; } } .section-main { background-color: @section_main_bg_color; } }output:

One thought on “Membuat frontend dengan bantuan less”