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

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:   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.