Front-end Programmer hampir dipastikan selalu berurusan dengan tampilan atau style, terutama yang menggunakan CSS. Menulis kode-kode CSS seringkali menjadi pekerjaan yang menjemukan, bahkan menjengkelkan apabila perlu berulangkali menuliskan sintaks-sintaks yang hampir sama untuk elemen-elemen yang berbeda. Masalah lain yang sering timbul adalah penulisan selector yang panjang untuk menunjukkan sebuah elemen turunan. Belum lagi masalah yang timbul terkait cross-browsing yang membuat Anda wajib menuliskan sebuah properti tampilan berkali-kali untuk tiap mesin peramban yang umum digunakan. Hal-hal tersebut tentunya cukup mengganggu dalam proses membangun tampilan sebuah web yang baik, apalagi kalau dikerjakan oleh seorang pemula dalam penggunaan CSS. Untungnya saat ini telah ada framework yang mampu memberikan solusi bagi kendala-kendala dalam pembuatan kode CSS tersebut yang bernama LESS.
LESS adalah preprosesor CSS yang memberikan sentuhan dinamis kepada CSS dengan fitur variabel, mixin, serta operasi dan fungsi yang dimilikinnya. Tujuan dibuatnya LESS sendiri adalah untuk memberikan kemudahan dan keringkasan dalam membangun tampilan website yang menggunakan CSS. Proses kompilasi LESS menjadi CSS dapat berjalan baik di sisi klien dengan javascript maupun di sisi server dengan bantuan Node.js dan Rhino. Berkas LESS yang memiliki format *.less dan akan diubah menjadi file berformat CSS oleh file javascript less.js pada sisi klien atau melalui kompilasi pada sisi server.
LESS memiliki beberapa fitur yang mampu membawa pemrograman tampilan website menggunakan CSS menuju ke skala yang lebih dinamis. Berikut ini adalah fitur-fitur utama yang dimiliki oleh LESS.
Dengan menggunakan variabel pada LESS kita dapat mendeklarasikan nilai-nilai yang akan digunakan secara luas atau sering digunakan dalam satu tempat saja. Nilai-nilai tersebut nantinya dapat kita gunakan berulang-ulang dalam stylesheet dengan mudah. Dengan demikian, untuk membuat perubahan kode secara global menjadi lebih mudah, sesederhana mengubah satu baris kode. Berikut ini contoh penggunaan variabel pada LESS.
/* Kode pada LESS */
@biru: #19366e;
h1{
color: @biru;
}
a{
color: @biru;
}
/* Kode CSS hasilnya */
h1{
color: #19366e;
}
a{
color: #19366e;
}
Mixin memungkinkan kita untuk memasukkan semua properti dari sebuah kelas ke dalam kelas lain cukup dengan menyertakan nama kelas tersebut sebagai properti kelas tujuan. Pada dasarnya mixin hampir sama dengan variable, tapi mixin mencakup seluruh kelas. Mungkin mixin ini pada bahasa pemrograman lain bisa Anda setarakan dengan fungsi atau modul, Anda juga dapat menyertakan parameter atau argument di dalamnya. Berikut ini adalah contoh penggunaan mixin pada LESS.
/* Pada LESS */
.borad (@rad: 10px){
-webkit-border-radius: @rad;
-moz-border-radius: @rad;
border-radius: @rad;
}
#comment-box{
.borad(15px);
}
.container{
.borad;
}
/* CSS Hasilnya */
#comment-box{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.container{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
LESS juga mendukung nested rule atau aturan bertingkat yang memungkinkan Anda untuk mendefinisikan elemen turunan dengan spesifik tanpa perlu menuliskan nama selector dari elemen tersebut dengan baris yang panjang. Anda cukup mendefinisikan elemen tersebut di dalam elemen induknya. Dengan demikian turunan elemen dapat diketahui dengan mudah dan membuat kode pada stylesheet lebih ringkas. Berikut ini adalah contoh penggunaan nested rule pada LESS.
/* Pada LESS */
#home{
h1{
font-size: 1.5em;
font-weight: bold;
}
p{
font-size: 1.02em;
a{
color: red;
text-decoration: none;
&:hover{text-decoration: underline;}
}
}
}
/* CSS Hasilnya */
#home h1{
font-size: 1.5em;
font-weight: bold;
}
#home p{
font-size: 1.02em;
}
#home p a{
color: red;
text-decoration: none;
}
#home p a:hover{
text-decoration: underline;
}
Pengembang LESS juga menyertakan operasi matematika yang memungkinkan Anda untuk menjumlahkan, mengurangi, membagi maupun mengalikan warna atau nilai lainnya pada properti sebuah elemen. Fitur ini mendukung terjadinya keterkaitan yang lebih kompleks antar properti dari elemen tampilan sehingga perubahan secara masif bisa dilakukan dengan mudah. Karena fungsi-fungsi dan operasi tersebut diproses satu persatu menggunakan javascript, Anda memungkinkan untuk mengatur nilai-nilai properti sedemikian rupa sesuai kehendak. Berikut ini adalah contoh penggunaan fungsi dan operasi pada LESS.
/* Pada LESS */
@text-color: #333;
@border: 1px;
h1{
color: @text-color + #000066;
border-left: @border;
border-bottom: @border * 2;
}
.fancybox{
border: @border;
border-left: @border * 3;
background-color: @text-color + #777;
}
/* CSS Hasilnya */
h1{
color: #333399;
border-left: 1px;
border-bottom: 2px;
}
.fancybox{
border: 1px;
border-left: 3px;
background-color: #aaaaaa;
}
Pada artikel ini akan dibahas cara menggunakan LESS yang diproses di sisi klien. Pada dasarnya untuk menggunakan LESS ini cukup mudah.
