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:

@red: #FF0000;

.loop_color_list( @i ) when (@i > 0) { //jika @i > 0, eksekusi kode ini 
    .loop_color_list(@i - 1); //panggil diri sendiri dengan mengambil @i saat ini dikurangi 1

    [email protected]{i}{         //akan menjadi .bg-red-lighten-1(sesuai index)
        background-color: @red;
    }

    [email protected]{i}{
        background-color: @red;
    }
}

.loop_color_list(5); //panggil fungsi sejumlah iterasi

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

@red: #FF0000;

.loop_color_list( @i ) when (@i > 0) {
    .loop_color_list(@i - 1); //loop

    [email protected]{i}{
        background-color: lighten(@red,@i*5); 
    }

    [email protected]{i}{
        background-color: darken(@red,@i*5);
    }
}

.loop_color_list(5);

Output:

Jika css ini diterapkan pada html akan seperti ini

Oke, selamat mecoba.

Leave a Reply

%d bloggers like this: