Efisiensi Penulisan Kode CSS Dengan LESS

Efisiensi Penulisan Kode CSS Dengan LESS

LESS telah mewujudkan keinginan banyak programmer antar muka website yang mendambakan kemudahan dalam menggunakan CSS. Adanya variable, mixin, nested rule, fungsi dan operasi, serta…

LESS telah mewujudkan keinginan banyak programmer antar muka website yang mendambakan kemudahan dalam menggunakan CSS. Adanya variable, mixin, nested rule, fungsi dan operasi, serta berbagai berbagai fitur lainnya pada LESS, membuat LESS menjadi jawaban bagi programmer yang menginginkan efisiensi untuk memperoleh hasil maksimal dengan kode seminimal mungkin. Dengan perangkat sehandal LESS berada dalam genggaman dan tahu bagaimana cara menggunakannya, mungkin yang pertama kali terpikir adalah untuk apa menggunakannya. Dalam artikel ini akan kita bahas penggunaan beberapa properti CSS yang dapat menunjukkan kehandalan LESS.

Border-radius

Border-radius adalah salah satu properti CSS yang cukup mendasar dan sering digunakan untuk menciptakan efek sudut melengkung pada elemen. Penggunaan sudut melengkung dapat menghasilkan tampilan elemen yang lebih berkesan dengan cukup mudah. Tingkat kelengkungan sudut yang dihasilkan bervariasi sesuai dengan kode.

Masalah yang muncul dalam menggunakan border-radius ini adalah penggunaan prefik untuk vendor browser, masalah yang hampir selalu muncul di setiap fitur CSS3. Dengan menggunakan LESS Anda bisa menghemat waktu dan tenaga tiap kali memakai border-radius. Bagaimana caranya? Di sinilah kehebatan fitur mixin milik LESS ditunjukkan.

/* LESS Mixin */
.border-radius(@radius: 10px){
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
   border-radius: @radius;
}

/* Implementasi */
#feature{
   .border-radius(5px);
}

Pada kode di atas, bagian pertama adalah deklarasi mixin untuk border-radius. Bagian kedua pada kode di atas adalah cara kita mendeklarasikan elemen dengan border-radius menggunakan LESS. Apabila kode tersebut dikompilasi menjadi CSS, maka akan menghasilkan kode CSS seperti di bawah.

/* CSS hasil kompilasi */
#feature{
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

Dengan menggunakan  LESS mixin seperti pada contoh kode di atas, setiap kali Anda ingin membuat elemen dengan border-radius, Anda cukup menyertakan kelas mixin “.border-radius();” sebagai salah satu properti kelas tersebut. Setelah dikompilasi, kelas tersebut akan memiliki properti border-radius dengan nilai radius 5px. Apabila ingin merubah nilai radiusnya, Anda bisa menyertakan nilai yang diinginkan dalam tanda kurung seperti pada contoh di atas.

Box-shadow

Box-shadow adalah properti CSS3 lain yang cukup sering digunakan pada pembuatan tampilan website. Dengan menggunakan box-shadow Anda bisa memberikan efek bayangan pada sebuah elemen yang membuat tampilan website Anda menjadi memiliki kesan dimensi ruang. Seperti masalah CSS3 lainnya, apabila ingin menggunakan box shadow yang berjalan dengan optimal, Anda harus mengulang penulisan keempat nilai propertinya untuk tiap vendor. Sekali lagi kita akan menggunakan mixin LESS sebagai solusinya.

Box-shadow terdiri dari empat nilai yang harus didefinisikan. Nilai tersebut adalah posisi horisontal bayangan, posisi vertikal bayangan, radius blur, dan warna bayangan.

/* LESS Mixin */
.box-shadow(@x:  0, @y: 0, @blur: 3px, @color: #000){
   -webkit- box-shadow: @arguments;
   -moz- box-shadow: @arguments;
   box-shadow: @arguments;
}

/* Implementasi */
#popup{
   .box-shadow(3px,3px,5px,#aaa);
}

Kode LESS di atas apabila dikompilasi menjadi CSS akan menghasilkan kode seperti berikut.

/* CSS hasil kompilasi */
#popup{
   -webkit- box-shadow: 3px 3px 5px #aaa;
   -moz- box-shadow: 3px 3px 5px #aaa;
   box-shadow: 3px 3px 5px #aaa;
}

Untuk selanjutnya, setelah mixin box-shadow didefinisikan, Anda cukup menggunakan deklarasi kelas “.box-shadow();” untuk memberikan efek bayangan pada sebuah elemen.

Transform

Transform

Transform adalah properti shorthand CSS3 yang memungkinkan Anda untuk mengubah bentuk suatu elemen menjadi lebih dinamis. Anda bisa memutar, memperbesar ukuran, memperkecil ukuran, memiringkan bentuk, serta memindahkan posisi dengan properti transform tersebut. Karena transform merupakan properti shorthand yang adalah gabungan dari beberapa properti, maka nilai yang perlu dideklarasikan cukup banyak. Terlebih lagi transform merupakan properti CSS3 yang membutuhkan empat macam prefik vendor  yang berbeda dalam setiap penggunaannya. Hal tersebut tentunya membuat penggunaan transform menjadi merepotkan. Di sinilah LESS berperan menjadi penyelamat para programmer.

/*LESS Mixin*/
.transform(@rotate: 90deg, @scale: 1, @skew: 45deg, @translate-x: 5px, @translate-y: 5px ){
   -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate-x,@translate-y);
   -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate-x,@translate-y);
   -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate-x,@translate-y);
   -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate-x,@translate-y);
   transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate-x,@translate-y);
}

/* Implementasi */
#discount-box{
   .transform(45deg, 1.3, 15deg, 5px, 5px);
}

Kode LESS di atas apabila dikompilasi menjadi CSS akan menghasilkan kode seperti berikut.

/* CSS hasil kompilasi */
#discount-box{
   -moz-transform: rotate(45deg) scale(1.3) skew(15deg) translate(5px,5px);
   -webkit-transform: rotate(45deg) scale(1.3) skew(15deg) translate(5px,5px);
   -o-transform: rotate(45deg) scale(1.3) skew(15deg) translate(5px,5px);
   -ms-transform: rotate(45deg) scale(1.3) skew(15deg) translate(5px,5px);
   transform: rotate(45deg) scale(1.3) skew(15deg) translate(5px,5px);
}

Untuk selanjutnya, setelah mixin transform didefinisikan, Anda cukup menggunakan deklarasi kelas “.transform();” untuk memberikan efek bayangan pada sebuah elemen.

Transition

Transition

Transition adalah properti CSS3 yang memberikan transisi bagi tiap perubahan style pada sebuah elemen. Dengan adanya transisi, tampilan website yang dihasilkan akan terlihat lebih hidup sehingga semakin menarik. Meskipun demikian, menggunakan transition cukup merepotkan karena adanya prefik yang harus disertakan untuk lima vendor browser yang berbeda.

/* LESS mixin */
.transition(@property: all, @time: 1s, @ease: linear){
   -webkit-transition: @property @time @ease;
   -moz-transition: @property @time @ease;
   -ms-transition: @property @time @ease;
   -o-transition: @property @time @ease;
   transition: @property @time @ease;
}

/* Implementasi */
#fade-box{
   .transition(all,1s,ease);
}

Kode LESS di atas apabila dikompilasi menjadi CSS akan menghasilkan kode seperti berikut.

/* CSS hasil kompilasi */
#fade-box{
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}

Untuk selanjutnya, setelah mixin transition didefinisikan, Anda cukup menggunakan deklarasi kelas “.transition();” untuk memberikan efek bayangan pada sebuah elemen.

Gradient

Gradient

Gradient merupakan properti CSS3 yang berfungsi untuk menghasilkan gambar berupa gradasi warna sebagai latar belakang sebuah elemen. Fitur ini seharusnya menawarkan kemudahan dalam membuat tampilan yang lebih indah dan bervariasi. Sayangnya, fitur ini merupakan properti CSS3 yang membutuhkan lima prefik berbeda untuk berjalan dengan baik di tiap browser. Berikut ini adalah contoh penggunaan linear-gradient dengan LESS.

/* LESS Mixin */
.linear-gradient(@origin: top, @start: #fff, @stop: #999){
   background-color: (@start+@stop)/2;
   background-image: -webkit-linear-gradient(@origin, @start, @stop);
   background-image: -moz-linear-gradient(@origin, @start, @stop);
   background-image: -ms-linear-gradient(@origin, @start, @stop);
   background-image: -o-linear-gradient(@origin, @start, @stop);
   background-image: linear-gradient(@origin, @start, @stop);
}

/* Implementasi */
#grad-box{
   .linear-gradient(left, #00aff0,#ffffff);
}

Kode LESS di atas apabila dikompilasi menjadi CSS akan menghasilkan kode seperti berikut.

/* CSS hasil kompilasi */
#grad-box{
   background-color: #80d7f8;
   background-image: -webkit-linear-gradient(left, #00aff0, #ffffff);
   background-image: -moz-linear-gradient(left, #00aff0, #ffffff);
   background-image: -ms-linear-gradient(left, #00aff0, #ffffff);
   background-image: -o-linear-gradient(left, #00aff0, #ffffff);
   background-image: linear-gradient(left, #00aff0, #ffffff);
}

Untuk selanjutnya, setelah mixin linear-gradient didefinisikan, Anda cukup menggunakan deklarasi kelas “.linear-gradient();” untuk memberikan efek bayangan pada sebuah elemen.

Kesimpulan

Dengan menggunakan fitur mixin yang dimiliki oleh LESS, penggunaan prefik-prefik CSS3 pada elemen bisa disederhanakan hingga mencapai satu baris saja. Anda bisa menggunakan kode-kode mixin di atas pada proyek website Anda atau mengkreasikan mixin sendiri yang lebih mudah digunakan. Selamat mencoba!

Tag: , , ,

2 Comments

Leave Comment
  1. Evan says:

    mantab sekali mas sharingnya :D
    keep it up!

  2. Evan says:

    Mantab mas sharingnya, keep it up! :D

Write Comment

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