Looping dengan less

Looping dengan less

Halo, kali ini kita akan mencoba membuat beberapa rule dengan metode “looping”.

Jadi ceritanya kita akan membuat beberapa rule didalam looping. Jadi semisal kita memiliki suatu class khusus untuk mengatur background color. Tapi kita ingin membuat beberapa variasi kecerahan pada warna tersebut, kita bisa menggunakan looping ini. Jadi output yang diinginkan adalah:

.bg-red{background-color:#FF0000}

.bg-red-lighten-1{background-color:#FF1111}

.bg-red-lighten-2{background-color:#FF2323}

dsb….

Tentu kita tidak mau dong membuat variasi kecerahan warna ini satu persatu, karena akan sangat merepotkan. Maka dari itu, kita bisa menggunakan looping.

Pada dasarnya, less tidak memiliki looping, tapi kita bisa mengakalinya dengan menggunakan fungsi rekursif:

setelah tercompile, kode kita akan menjadi seperti ini:

class .bg-red-darken dan lighten tergenerate sesuai jumlah iterasi yang kita inputkan

tapi… kita ingin membuat warna menjadi lebih gelap dan terang, tentu kita harus melakukan “sesuatu” didalam looping tersebut.

Ya, beruntungnya, less memiliki fungsu bawaan untuk membuat warna menjadi lebih terang / gelap. yaitu dengan lighten dan darken

jadi kita akan menerapkan fungsi darken dan lighten pada rule kita

Output:

Jika css ini diterapkan pada html akan seperti ini

Oke, selamat mecoba.

Tinggalkan Balasan

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