Kembali lagi dengan penulis dan tutorial penggunaan CSS LESS. Di tutorial sebelumnya kita telah melakukan persiapan untuk menggunakan CSS LESS, sekarang saatnya mencoba menggunakannya. Di tutorial kali ini, penulis akan mengajarkan bagaimana melakukan variable, mixins, operations dan nested rules.

1. Variable

Kita mampu membuat variable sendiri dan dipakai berulang-ulang kali. Contoh penggunaannya:

@warna: #555;
header{
    background-color: @warna;
}

Hasilnya akan seperti:

header{
    background-color: #555;
}

2. Mixim

Mixim membuat kita dapat menggunakan class pada class lainnya. Contoh:

.border{
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ddd;
    border-top: 1px solid #eee;
    border-left: 1px solid #fff;
}
.box{
    .border;
    padding: 5px;
}

Hasilnya akan seperti:

.box{
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ddd;
    border-top: 1px solid #eee;
    border-left: 1px solid #fff;
    padding: 5px;
}

Kita juga dapat menggunakannya seperti funtions dengan menggabungkannya dengan variable, Contoh:

.rounded-corners(@radius: 5px){
    border-radius: @radius;
}
.box1{
    .rounded-corners;
}
.box2{
    .rounded-corners(10px);
}

Hasilnya akan seperti:

.box1{
    border-radius: 5px;
}
.box2{
    border-radius: 10px;
}

3. Nested Rules

Nested Rules memudahkan kita untuk tidak perlu menulis ulang lagi kode css kita setiap kali melakukan inheritance. Contoh:

#header{
    font-family: helvetica;
    font-size: 12px;
}
#header ul{
    list-style: none;
    float: left;
}
#header ul li{
    float: left;
    margin-right: 10px;
}
#header ul li a{
    color: #9ff;
}
#header ul li a:hover{
    text-decoration: underline;
}

Bisa kita singkatkan penulisannya menjadi:

#header{
    font-family: helvetica;
    font-size: 12px;
    ul{
        list-style: none;
        float: left;
        li{
            float: left;
            margin-right: 10px;
            a{
                color: #9ff;
                &:hover{
                    text-decoration: underline;
                }
            }
        }
    }
}

4.Operations & Functions

Dengan adanya fungsi operation, kita bisa menambahkurangkan ataupun mengkalibagikan semua variable yang ada. Otomatis kita dapat melakukan hal-hal yang biasa tidak dapat dilakukan dengan css. Contoh penggunaan:

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: @base-color * 3;
    border-left: @the-border;
    border-right: @the-border * 2;
}
#footer {
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
}

Hasilnya:

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

Okay, sampai di sini artikel kita tentang LESS CSS. Semua fungsi di atas adalah dasar-dasar dari penggunaan LESS CSS. Kedepannya penulis akan memberikan contoh membuat beberapa efek dengan menggunakan LESS CSS. Bagi kalian yang ingin request untuk tutorial selanjutnya  bisa memberikan comment di bawah. Bye-bye