Simplify Your CSS3 with LESS

Kira-kira setengah tahun yang lalu sekitar bulan Juni saya sempat membaca dan sedikit mepelajari tentang LESS. LESS merupakan sebuah alat kecil yang menurut saya cukup mengasikkan dan amazing. Dengan menggunakan Less kita bisa membentangkan kemampuan CSS dengan namambahkan variable, mixins, operations and nested rules. Ini berarti anda dapat menulis kode CSS dengna lebih sederhana dan cepat. Bahkan dengan komplekitas yang dimiliki properti CSS3 saat ini, saya akan mencoba memberikan beberapa contoh pengkode-an CSS3 dengan menggunakan Less. Pasti ini akan menarik ;)

Saya akan mencoba menunjukkan sesederhana mungkin implementasi JavaScript LESS to simplify CSS3 markup. Salah satu fitur utama yang dimiliki oleh LESS.js dan sangat saya sukai adalah penggunaan variabel dan mixin. Cara ini sangat sederhana, tapi saya rasa anda akan sedikit bingung jika belum pernah mencobanya.

Ketika setengah tahun lalu saya membaca tentang LESS, kelihatannya cukup rumit dan semakin banyak yang harus dikerjaan. Setelah berdiskusi dengan beberapa teman, saya sadar bahwa the whole process could be a lot simpler with JavaScript. Ternyata semua itu tak seperti kelihatannya ketika mencobanya, lebih sederhana dengan adanya JavaScript. Jadi sekarang menerapkan LESS terasa begitu mudah, semuanya di-compile secara otomatis dengan benar pada browser. Yu ah, mari kita lihat bagimana LESS bekerja.

Mari Mulai

Deklarasi Variabel

Bagian inilah yang menjadi daya tarik saya untuk menggunakan LESS. Kita dapat menggunakan variabel, ini seolah mengingatkan saya bahwa ketika pertama terjun di dunia website, saya adalah seorang web programmer yang merangkap front-end developer dan web designer. Tentunya hal ini betul-betul sangat mempermudah cara kerja kita. Dengan membuat variabel yang bersifat global yang dapat digunakan kapanpun. Bahkan kita dapat membuat variabel yang nilainya dapat di ubah dimanapun kita memanggil variabel tersebut. Sangat menarik bukan?

Untuk melihat cara ini digunakan, mari kita coba untuk menentukan beberapa variabel warna. Bayangkan bahwa halaman website kita memiliki warna primer dan warna-warna sekunder yang nantinya akan sering digunakan berkali-kali. Tentunya dari pada harus mengingat-ingat kode warna, lebih mudah untuk mengingat variabel yang kita buat sendiri bukan?

Cara menentukan variabel pada LESS, cukup dengan menggunakan simbol @ saja:

Cuma itu! Sekarang kapanpun kita ingin menggunakan warna tersebut, dengan cara sederhana seperti menggunakan CSS seperti biasanya namun kita mengganti code warna dengan variabel yang suda kita buat.

Jadi kapanpun kita merubah kode warna pada variabel, maka secara otomatis warna-warana dimana variabel tersebut dipanggil akan berubah. Dengan begitu kita bisa lebih menghemat waktu dan membuatnya lebih simpel.

Operations

Seperti pada JavaScirpt dan bahasa pemrogramman lainnya, LESS memungkinkan kita untuk melakukan perhitungan pada variabel. Jika anda termasuk orang yang senang dengan Matematika, yakin deh kalo ini akan menjadi menarik.

Kita misalkan akan mengatur sebuah blok content dan side bar. Dimana lebarnya blok content adalah dua kalinya side bar.

Hasil dari code di atas secara otomatis lebar blok content menjadi 400px.

Mixins

Kali ini, saatny kita bermain dengan CSS3. Mari kita mulai dengan sintaks CSS3, misalnya border-radius:

Seperti yang kita ketahui, saat ini untuk memastikan bahwa sintaks tersebut berjalan di beberapa browser harus menyertakan prefiks khusus untuk masing-masing browser. Kode di atas, kita menggunakan -webki-border-radius dan -moz-border-radius agar berjalan di Safari, Chrome dan Firefox.

Biasanya, setiap kali kita membuat rounded corner dengan CSS3 dengan beberapa versi rounded, maka kita harus membuat tiap-tiap rounded corner version. Tapi dengan LESS hal semacam ini menjadi lebih sederhana dan mudah. Kita bisa membuat versi rounded corner secara fleksibel. LESS memungkinkan kita untuk menanamkan beberapa variabel ke dalam sebuah kelas yang kemudian bisa dijadikan nilai pada kode CSS3 tersebut. Bingung? Mari kita lihat sintaks berikut ini:

Nilai rounded-corner pada ID content adalah 10px, karena nilai pada variabel @radius adalah 10px. Sedangkan nilai rounded-corner pada ID footer adalah 15, hal ini karena pada ID footer kita memberikan nilai 15px.

Multiple Variable Mixins

Dari tadi kita menggunakan rounded-corner sebagai contoh karena hanya memiliki satu nilai saja, cukup simpel. Lalu bagaimana dengan lainnya yang lebih kompleks seperti box-shadow atau transition? Mari kita lihat bentuknya:

Seperti yang kita lihat pada contoh code box-shadow di atas, kita memerlukan empat nilai berbeda pada masing-masing spesifik prefiks browser. Lalu bagaimana kita membuatnya dengan LESS? Ini mungkin terdengan rumit, tapi sebenernya sederhana saja. Jika anda terbiasa dengan JavaScript maka akan terasa biasa saja.

Dari contoh sintaks di atas, kita bisa ambil kesimpulan bahsa LESS memang membuat code CSS3 menjadi lebih sederhana. Jelas kita sudah tidak perlu lagi mengulang-ulang sintaks code spesifik prefik browser karena sudah kita deklarasikan dalam variabel.

Nested Rules

LESS juga memungkinkan kita untuk membuat nested rules. Perhatikan bagaimana kita dapat membungkus semua styles element dari ID content dalam satu keranjang (bungkus). Kini kita tidak perlu lagi menulis ID content secara berulang.

Coba perhatikan contoh di atas, saya ingin menunjukan perbedaan antara CSS murni dan LESS dengan nested rules-nya. Kita tidak perlu lagi menuliskan ID content secara berulang ketika kita menggunakan nested rules.

Compiler

Jadi kalo bisa saya simpukan menurut pendapat pribadi, tujuan utama dari LESS adalah untuk membatu mempercepat dan menyederhanakan langkah-langkah developing. Karena yang akan di baca pada browser kita tetaplah CSS, bukan LESS. Setelah anda membuat LESS pada website anda, makan LESS tersebut akan dicompile oleh Less.js menjadi CSS dan CSS lah yang akan di baca oleh browser.

Namun untuk mempermudah, anda dapat meng-compile LESS menjadi CSS secara otomatis dengan aplikasi LESS.

Hanya dengan DRAG and DROP file .less yang anda buat ke dalam aplikasi LESS maka aplikasi akan secara otomatis membuat file CSS di folder yang sama dengan file .less anda. Mudah bukan?

Sebenernya, saya juga membaca tentang SASS. Serupa dengan LESS, SASS juga digunakan untuk mempercepat dan mempermudah kita dalam mendevelope kode CSS. Fitur-fitur yang dimiliki juga mirip. Namun SASS lebih dekat denan Ruby. Namun saya belum sempat membaca dan mencoba SASS. Jadi saya belum bisa membandingkan secara rinci antara keduanya.

Namun jika anda ingin mencoba SASS, silahkan ke SASS-Lang.

Silahkan mencoba.