Fun CSS scripting dengan LESS css

“Akhirnya scripting CSS ga ngebosenin lagi bro…”

Mungkin cuma itu kata yang tepat buat saya untuk mengungkapkan perasaan yang timbul pas pertama kali coba coding CSS dengan LESS CSS.

Buat yang belum tahu apa itu LESS, anda web developer / Front-end web developer? wajib tau lah bro.. silahkan cek disini http://lesscss.org. Jadi LESS adalah sebuah pre-processor yang berbasis Javascript dimana berfungsi untuk membuat / menambahkan kemampuan baru pada script CSS.

Dimana sebelum nya CSS bersifat statis, dengan sintak monoton, pengulangan-pengulangan sintak terus terjadi, dan aturan-aturan yang begitu-begitu saja pasti ada yang akan merasa cepat bosan kalau harus coding CSS terus seharian tanpa henti, penglaman pribadi bro :D.

Terus kenapa LESS?

Dengan LESS, scripting CSS serasa seperti coding bahasa pemrograman (buat yang lebih suka programming ketimbang scripting CSS), terasa lebih dinamis dan menyenangkan, dan produktifitas bisa serasa meningkat 100% IMHO.

Dan yang paling penting adalah, sintak nya masih seperti CSS dengan beberapa penambahan kalau diperlukan, artinya anda tidak perlu belajar bahasa/sintak baru, cukup terbiasa dengan CSS dan scripting LESS akan terasa “Just a piece of cake!” kata orang sono bilang.

Saya ada pengalaman memperkenalkan LESS ke salah seorang front-end developer kita di kantor, hanya sehari bahkan kurang sejak saya perkenalkan LESS, dia sudah lancar dan kerja nya lebih cepat dan efisien, dan dia pun terasa lebih menikmati mainan baru nya.

GEtting Started

Untuk memulai development dengan LESS cukup dengan menyertakan Javascript Less pada file html, dengan tambahan javascript itu, maka javascript ini akan memproses setiap file yang mempunyai extensi .less. Di file ini lah kita akan scripting Less/Css. Kira-kira seperti di bawah ini (silahkan baca dokumentasi untuk lebih detail):

...
< link href="styles.less" rel="stylesheet/less" type="text/css" />
< script type="text/javascript" src="less.js">< /script>
< /head>
...

Seperti  terlihat diatas, saya menyertakan file style.less dan less.js ke dalam file html.

Disini saya tidak akan menjelaskan secara detail setiap fitur dari LESS, namun hanya akan memperlihatkan beberapa contoh menarik betapa LESS bisa merubah cara pandang anda terhadap CSS.

1. Variabel

Sebagaimana pada bahasa pemrograman pada umum nya, variable berfungsi untuk memegang sebuah nilai.

/* file: style.less */

@mycolor : #ff0000;

.header{
    background:@mycolor;
}

.sidebar{
    background:@mycolor;
}

Anda pasti sudah mengerti, dengan cara seperti itu ketika ingin mengganti warna pada header dan sidebar, cukup rubah nilai pada variable @mycolor, cukup satu perubahan, semua berubah sekaligus, quick and simple.

2. Mixin, seperti halnya sebuah fungsi dalam pemrograman.

Selain kemampuan mendeklarasikan variable,  juga bisa seakan-akan membuat membuat fungsi dan bisa dipanggil berulang ulang. We do love DRY principle :D.

/* file: style.less */

.myshadow{
    box-shadow: 0 0 10px #555;
    -moz-box-shadow: 0 0 10px #555;
    -webkit-box-shadow: 0 0 10px #555;
}

#header{
    .myshadow; // Tinggal panggil dimana diperlukan.
    background: red;
}

.footer{
    .myshadow; // juga panggil disini.
}

Wow.. now thats cool, but wait.. ada lagi yang lebih cool..

3. Mixin dengan parameter, apa bisa? Sangat bisa.

/* file: style.less */

.myshadow(@length, @color){
    box-shadow: 0 0 @length @color;
    -moz-box-shadow: 0 0 @length @color;
    -webkit-box-shadow: 0 0 @length @color;
}

#header{
    .myshadow(5px, #ff0000); // Tinggal panggil + parameter nya.
    background: red;
}

.footer{
    .myshadow(20px, #000); // Panggil disini dengan nilai parameter berbeda.
}

4. Nested Rules

Ini juga gokil abis, sangat menghemat waktu dan tenaga. langsung aja cekidot. Kalau Html nya gini:

< div class="header">
    < div class="logo">< img src="logo.png"/>< /div>
    < ul class="menu">
    < /ul>
< /header>

Biasanya CSS nya seperti ini:

.header{
    display:block; 
    background: red
}
.header .logo{ 
    float: left
}
.header ul.menu{
    display:block;
    background: black;
}

Uhh… itu ketik “.header” berkali-kali jari jadi pegel neh.., dengan LESS jadi simple kayak gini:

.header{
    display:block; 
    background: red;

    .logo{ 
        float: left
    }

    ul.menu{
        display:block;
        background: black;
    } 
}

Bisa dilihat, logo dan menu di nested di dalam nya header. Super sekali…

5. Operasi matematika

Ndak banyak komentar untuk yang satu ini, bisa sangat berguna sekali:

@container-height: 500px;
@zoom-height: 30px;

.zoom{
    position:absolute;
    top: ((@container-height/2)-@zoom-height);
}

Saya harap anda mengerti apa maksud formula diatas, tapi yang paling penting adalah operasi seperti itu mungkin dan bisa di LESS, dan ada saat nya anda akan memerlukannya.

6. Dan masih banyak fitur lainnya…

Yang saya jelaskan diatas itu belum seberapa, masih banyak lagi fitur yang bisa anda manfaatkan. Silahkan baca-baca dokumentasi nya untuk lebih lengkap nya ya.

Compile LESS to CSS

Penggunaan secara langsung less.js disarankan hanya pada saat development saja. Namun saat website anda sudah siap online, sebaiknya script LESS anda dicompile sehingga menjadi script CSS murni.

Hal ini dikarenakan less.js memerlukan waktu untuk memprosess script LESS menjadi CSS, sehingga dapat menimbulkan lag/delay kalau dipakai pada situs yang online. Oleh karena itu sebaiknya dicompile terlebih dahulu sehingga website yang online hanya me-load CSS yang sudah jadi hasil compile, jadi lebih ringan dan cepat.

Leave a Reply

Your email address will not be published. Required fields are marked *