Mengenal LESS Framework Untuk CSS

Mengenal LESS Framework Untuk CSS

Programmer antar muka website hampir dipastikan selalu berurusan dengan tampilan atau style, terutama yang menggunakan CSS. Menulis kode-kode CSS seringkali menjadi pekerjaan yang menjemukan,…

Programmer antar muka website 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.

Apa LESS itu?

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.

Apa Saja Fitur yang Dimiliki LESS?

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.

Variabel

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

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;
}

Nested Rule

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;
}

Functions & Operations

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;
}

Bagaimana Cara Menggunakan LESS?

Pada artikel ini akan dibahas cara menggunakan LESS yang diproses di sisi klien. Pada dasarnya untuk menggunakan LESS ini cukup mudah.

  1. Unduh file less.js dari tautan ini. Kemudian masukkan file tersebut ke dalam folder proyek website yang akan dikerjakan.
  2. Buatlah file LESS untuk menampung kode tampilan dari website yang akan dibuat. Dalam contoh ini kita beri nama style.less.
  3. Sertakan less.js setelah deklarasi kode tampilan dengan LESS pada file html kita. File less.js harus dideklarasikan setelah deklarasi file LESS agar dapat mendeteksi dan memproses fileLESS tersebut dengan benar. Anda juga bisa menyalin kode di bawah ini untuk mempersingkat langkah ini.
    <link rel="stylesheet/less" type="text/css" href="styles.less">
    <script src="less.js" type="text/javascript"></script>
  4. Masukkan kode tampilan website dalam LESS pada file style.less yang telah dibuat pada langkah kedua.
  5. Setiap kali terjadi perubahan kode yang disimpan dalam file style.less tersebut akan diproses secara otomatis oleh less.js sehingga menjadi CSS yang dimengerti oleh browser sebagai format tampilan website.

Berdasar pengalaman penulis menggunakan LESS yang sangat mudah, penulis merekomendasikan LESS sebagai salah satu tool pendukung penting dalam membangun tampilan website menggunakan CSS. Bagaimana dengan Anda? Selamat mencoba!

Tag: , , , , , ,

14 Comments

Leave Comment
  1. didik says:

    Ini misal digabungin sama Bootstrap kira-kira bisa gak ya? atau udah ada yg pernah nyobain? hehe

  2. Dede Pradana says:

    mantabb broo.. thx.. :)

  3. Sering denger sih tentang less ini, tapi baru kali ini baca tutornya. Terima kasih masbro, bermanfaat! :D

  4. Liffindra Angga Zaaldian says:

    kalo buat develop sih emang keren dan sangat membantu. tapi, apakah berpengaruh dengan kecepatan loading halaman website?? +

  5. Widi Hastomo says:

    wah keren nih… patut dicoba..

  6. mahrizal says:

    Terma kasih mas , uraiannya jelas

    bermanfaat

  7. anonymus says:

    terima kasih banyak mas artikelnya

Write Comment

Your email will not be published. The marked label is required.