Bismillah. Alhamdulillah. Cukup lumayan lama pernulis bermain-main dengan kosakata dalam bahasa CSS sehingga memunculkan berbagai keinginan, baik keinginan dalam mengikuti perkembangan bahasa CSS untuk mengenalinya lebih jauh, maupun keinginan cara penulisan kosakata CSS yang lebih mudah dan cepat. Kemudian penulis melakukan penelusuran untuk mencari alat atau perangkat lunak yang bisa digunakan dalam menulis kosakata bahasa CSS dengan lebih cepat dari pada cara primitif, awal pencarian ditemukanlah bahasa SASS (Syntactically Awesome Stylesheets) yang merupakan cikal bakal dari pengembangan bahasa-bahasa Preprocessor Dynamic Stylesheet, namun SASS ternyata kurang bersahabat bagi mereka-mereka yang belum terbiasa dengan
Ruby atau
Compass.
SASS dikembangkan oleh
Hampton Catlin yang terinspirasi dari bahasa Haml (HTML abstraction markup language) yang juga dikembangkan oleh pengembang SASS. Penelusuran dilanjutkan dan bertemulah dengan
LESS yang dibuat dan dikembangkan oleh
Alexis Sellier atau lebih dikenal dengan cloudhead. Ternyata selain LESS ada juga bahasa Preprocessor CSS lainnya yaitu
Stylus.
Apa Preprocessor LESS?
LESS sebenarnya merupakan salah satu pengembangan bahasa CSS, namun bukan pada sisi penambahan fungsi, property maupun value, LESS lebih ke kemudahan dan kecepatan penulisan bahasa CSS yang telah ada. Boleh dikatakan, bahwa LESS hanyalah sebuah cara penulisan CSS pra pengolahan (seperti halnya bahasa side server; php, asp) yang digunakan sebagai jembatan antara CSS dengan browser. Awalnya penulis beranggapan bahwa LESS merupakan saingan bahasa CSS, namun ternyata anggapan tersebut keliru. Kemudian anggapan ini berubah menjadi, bahwa LESS merupakan bahasa penyempurnaan dari beberapa kelemahan bahasa CSS, dan jelas itu juga keliru. Lalu apa LESS?
LESS adalah preprocessor (pra pengolahan) yang merupakan cara lain dalam menuliskan kosakata CSS, penulisan menggunakan bahasa preproccesed (pra olah/mentah) dan kemudian dikonversi (compile) ke dalam bahasa CSS murni baik dengan cara dikonversi langsung kedalam bahasa CSS murni maupun tanpa dikonversi dengan menambahkan mesin side server LESS agar browser mampu mengkonversinya. Jika kita biasanya menulis bahasa CSS secara manual, LESS selangkah lebih maju dan lebih modern dari cara penulisan kosakata bahasa CSS yang primitif. Namun bukan berarti LESS merupakan tool layaknya teks editor, justru LESS dapat dituliskan pada hampir semua teks editor murni (Native Text Editor). LESS merupakan tata cara atau aturan penulisan cepat kosakata bahasa CSS dan kemudian dikonversi serta disusun ulang menjadi bahasa CSS murni sesuai dengan aturan baku bahasa CSS yang bisa dirender oleh browser. LESS lebih fleksibel dan dinamis, karena kita bisa menggunakan bahasa sendiri dalam penulisannya sebagai variabel, interpolasi, nesting, mixin, operasi dan fungsi, namun demikian property dan value harus tetap sesuai aturan bahasa CSS. (Masih bingung?)
Kenapa Menggunakan Preprocessor CSS?
Karena ini bukan CSS, maka tidak terikat dengan aturan baku dan keterbatasan CSS. LESS membuat cara menulis CSS menjadi sangat mudah dan sederhana. CSS sebenarnya sudah bagus dan hebat, tetapi CSS tidak memberikan kita kebebasan berekspresi dalam penulisannya. Misal, banyak para developer dan desainer menginginkan abstraksi lebih bebas dari pada CSS default. Salah satu tujuan dari CSS adalah untuk memberikan kemudahan dan kesederhanaan sehingga siapapun dapat dengan cepat menangkap bahasa yang digunakan dan mempelajarinya. Namun fokus tersebut justru membatasi apa yang lebih dapat dilakukan pengembang CSS, dan pada umumnya kita tidak menyukai keterbatasan. Kita membutuhkan variabel yang lebih luas, dan jika CSS tidak mampu memberikan variabel tersebut, kita akan mencari cara untuk membuat varibel yang lebih mendekati kebutuhan kita. Preprocessor menawarkan lebih dari sekedar variabel yang tersedia, sehingga kita bisa bebas berkarya selama file CSS yang dihasilkan tetap sebagai karya CSS biasa. Anda tidak harus menggunakan preprocessor dalam menuliskan CSS, namun suatu hari akan banyak orang yang kemudian belajar menggunakannya sehingga menjadi terbiasa dengan preprocessor karena mereka menemukan kemudahan dan kesederhanaan dalam menulis CSS dari pada tanpa preprocessor. Dan banyak yang kemudian enggan untuk kembali menulis CSS dengan cara biasa lagi. (Masih bingung?)
Kemungkinan Masalah Preprocessor CSS
Pada artikelnya yang berjudul "
January’s 12412: Researching LESS & SASS", Amber Weinberg mengangkat tema mengenai kemungkinan masalah yang muncul dalam penggunaan preprocessor. Dari beberapa komentar yang ditinggalkan sepertinya telah banyak pengguna LESS yang telah jatuh hati dan merasa lebih nyaman menggunakan bahasa preprocessor. Namun kemungkinan masalah penggunaan preprocessor CSS memang perlu untuk diangkat sebagai sebuah perbandingan sebelum anda mengambil kesimpulan untuk menggunakannya.
Masalah yang mungkin timbul dari penggunaan preprocessor CSS menurut Amber antara lain:
- Apa yang terjadi jika pengembang lain perlu mengedit CSS dan tidak tahu atau menyadari penggunaan preprocessor pada situ yang dikelolanya?
- Ketika menulis CSS dalam sebuah tim, bagaimana Anda mengontrol struktur dan pengorganisasian dari kode?
- Apa yang terjadi jika JavaScript dinon-aktifkan?
Isu dari masalah diatas adalah kesulitan mengkomunikasikan antara satu pengembang dengan pengembang lain terutama bagi mereka yang bekerja dalam sebuah tim. Ketika anda menggunakan bahasa fleksibel sesuai keinginan anda sendiri, belum tentu anggota tim lain akan mampu memahaminya dengan cepat, justru hal ini akan menjadi kendala ketika pekerjaan kita merupakan pesanan klien. Sedangkan klien yang membeli karya kita mempekerjakan orang lain dalam pemeliharaannya. Namun, masalah ini hanya muncul apabila kita menggunakan metode side server (menggunakan file JavaScript LESS sebagai compiler) dalam mengkonversi LESS. Toh, ini tidak akan menjadi kendala apabila LESS dikonversi terlebih dahulu secara lokal (pada komputer kita) menjadi file CSS biasa dan baru kita menyerahkan file CSS biasa tersebut kepada klien atau anggota tim lain. Dan atau untuk menghindari kesulitan komunikasi antara anggota tim, dibuat kesepakatan bersama mengenai penggunaan bahasa LESS dalam kerja tim kita. Namun, isu masalah ini akan tetap menjadi kendala ketika kita harus merubah suatu kebiasaan dan ketika anggota tim lain tidak bersedia untuk beralih menggunakan preprocessor LESS.
Jadi, semua ini kembali pada diri kita sendiri. Tetap menuliskan CSS seperti biasa, atau mulai menggunakan preprocessor LESS agar lebih cepat dan sederhana dalam penulisannya?
Compiler Preprocessor LESS
Sebagai permulaan untuk memahami LESS, kita akan belajar menuliskan LESS dan mengkonversinya menjadi file CSS biasa secara lokal saja. Jika anda menelusuri situs resmi LESS, maka akan ditemukan dua metode konversi file LESS, yaitu:
- Penggunaan Client-Side; Dengan memasang file less.js pada dokumen HTML. Less.js digunakan sebagai compiler agar browser mampu membaca file LESS, kemudian Less.js akan melakukan permintaan fungsi Ajax untuk memanggil file LESS anda. Hal ini sangat tidak efisien dalam hal kinerja dan harus dihindari dalam penggunaan hasil produksi. Apalagi jika JavaScript dinon-aktifkan, maka halaman anda akan hancur berantakan. Tetapi jika anda ingin menggunakan sebagai prototype dengan menggunakan LESS dengan cepat, hal ini syah-syah saja.
- Penggunaan Server-Side; dengan cara meng-install NPM (Node Package Manager) atau Ruby pada komputer sebagai compiler. Namun jika anda tidak terbiasa dengan penggunaan perintah command-line, maka hindari juga menggunakan cara ini. Walaupun sebernarnya cara ini sangat efisien bagi yang terbiasa dengan perintah command-line.
- Aplikasi GUI Compiler LESS; Selain dengan dua metode diatas, kita ternyata bisa menulis LESS secara lokal (komputer sendiri) dan kemudian mengkonversinya menjadi CSS standar dengan bantuan aplikasi compiler LESS. Aplikasi-aplikasi Compiler LESS bisa dilihat dan dipilih pada bagian berikutnya.
Aplikasi GUI Compiler LESS
Beberapa aplikasi yang disebutkan, digunakan sebagai Compiler LESS, sehingga kita bisa langsung mengkonversi file LESS menjadi file CSS standar. Bahkan contoh yang disertakan bisa langsung dirender melalui browser, atau bisa di-compile menggunakan aplikasi dibawah ini:
- Crunch; Merupakan rekomendasi penulis, karena; tampilannya yang sederhana, berjalan disemua sistem operasi, menggunakan framework AdobeAIR, dapat langsung digunakan sebagai teks editor.
- SimpLESS; Aplikasi GUI ini hampir mirip dengan Crunch hanya saja tidak bisa digunakan sebagai teks editor. SimpLESS hanyalah compiler, namun mampu berjalan pada semua sistem operasi.
- WinLESS; Aplikasi ini juga hanya compiler saja, tanpa kemampuan Text Editor, hanya berjalan pada Sistem Operasi Microsoft Windows, namun dapat diintegrasikan dengan Teks Editor.
- Compass; Aplikasi ini banyak digunakan para pengembang profesional, hanya untuk preprocessor SASS, berjalan pada semua sistem operasi, namun tidak gratis alias berbayar.
- Codekit; aplikasi GUI Compiler Preprocessor khusus untuk pengguna Mac dan rekomendasi para pengembang preprocessor karena kemampuannya dalam menulis dan mengkonversi hampir semua preprocessor (SASS, LESS, Stylus).
- Scout; aplikasi ini berjalan disemua sistem operasi, open-source, namun saya belum mencobanya (silahkan dicoba).
- LiveReload; aplikasi GUI Compiler Preprocessor ini banyak diceritakan dan digunakan para pengembang, berjalan pada sistem operasi Mac dan Windows, dan belum tersedia untuk pengguna sistem operasi Linux.
Dasar Penulisan Preprocessor LESS
Bagaimana dengan persiapan awal sebelum belajar menulis LESS? Jika sudah siap, dibawah ini tidak akan diberikan contoh yang panjang lebar hingga memusingkan, namun kita akan mencoba memahami dasar-dasar dari LESS. Contoh dibawah ini lebih baik anda coba tulis sendiri sehingga terlihat hasilnya. Kemudian pahami dengan baik, agar kita mampu merasakan manfaat dan perbedaannya antara menulis CSS biasa dengan menulis LESS.
Integrasi Compiler Side-Client
Contoh penggunaan LESS akan dibahas secara terstruktur hingga menghasilkan suatu objek tertentu dan contoh yang akan dibahas menggunakan metode kompilasi Side-Client (Unduh file contoh terlebih dahulu sebagai pembanding). Ini berarti file LESS tidak perlu di-compile menggunakan aplikasi yang disebutkan diatas, karena kita akan menggunakan less.js sebagai compiler dengan proses konversi secara langsung pada browser (gunakan browser Firefox untuk melihat hasilnya, karena browser lain kurang bahkan tidak mendukung metode side-client untuk LESS).
Sisipkan link file .less pada dokumen HTML anda dengan setting rel dengan stylesheet/less
<link rel="stylesheet/less" type="text/css" href="style.less">
Unduh file
less.js dan masukan pada dokumen HTML anda
<script src="less-1.3.0.min.js" type="text/javascript"></script>
Pastikan bahwa file stylesheet ditempatkan sebelum script, sehingga persiapan awal dokumen kurang lebih menjadi seperti dibawah ini:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less-1.3.0.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
style.less merupakan file yang akan kita kembangkan sebagai contoh pada langkah berikutnya. Ini berarti anda harus mempersiapkan Text Editor untuk menulis file HTML dan LESS.
Skenario HTML
Jika compiler side-client sudah tersedia pada tag <head>, mari kita lanjutkan untuk mempersiapkan elemen objek HTML, seperti dibawah ini:
<div id="WadahObjek">
<div class="objek" id="objekSatu"></div>
<div class="objek" id="objekDua"></div>
<div class="objek" id="objekTiga"></div>
</div>
Skenario LESS
Setelah dokumen HTML dibuat seperti diatas, sekarang bukalah text editor anda dan buatlah file style.less. Kemudian berikan sentuhan style untuk objek yang telah dibuat pada HTML. Kita tuliskan CSS Standar dulu seperti dibawah ini:
body {
background:#262626;
}
#WadahObjek {
margin:0 auto;
width:650px;
}
.objek {
display:inline-block;
width:150px;
height:150px;
background:#191919;
margin:25px;
}Browser akan menampilkan objek dengan bentuk kurang lebih seperti dibawah ini:
Hmmm... Tidak ada yang spesial dari contoh kode CSS diatas, karena itu masih CSS standar walau sudah ditulis sebagai file LESS. Coba anda bayangkan, jika kita suka dengan warna #191919 untuk digunakan pada beberapa tempat yang tersebar disepanjang stylesheet dengan jumlah baris hampir 1000? Melelahkan sekali bukan? Lalu, setelah semua baris itu beres ditulis secara manual, tiba-tiba kita ingin mengubah warna tersebut dengan warna lain atau mengganti warna dengan sebuah perpaduan warna. Sungguh sangat melelahkan!
Variable
Variabel memungkinkan anda untuk menentukan suatu nilai yang dituliskan dalam satu tempat, dan kemudian menggunakannya disepanjang stylesheet, membuat perubahan global semudah mengubah satu baris kode.
Perhatikan kode LESS dibawah ini:
@WarnaDasar: #262626;
@WarnaSatu: #191919;
@TinggiLebar: 150px;
body {
background: @WarnaDasar;
}
#WadahObjek {
margin: 0 auto;
width: 650px;
}
.objek {
display: inline-block;
width: @TinggiLebar;
height: @TinggiLebar;
background: @WarnaSatu;
margin: 25px;
}
Perhatikan bahwa kita hanya perlu sekali menuliskan variable @WarnaDasar dengan nilai #262626. Ketika kita ingin melakukan perubahan warna maka hanya cukup merubah nilai pada variable @WarnaDasar saja. Lebih mudah dan cepat bukan?
Variabel LESS biasa dideklarasikan dengan simbol "@". Kita bisa memberikan nama variabel sesuai dengan keinginan kita dan atau dengan alasan kemudahan untuk mengingat, kemudian kita berikan nilainya. Setelah itu kita dapat merujuk nama variabel yang telah dibuat untuk ditempatkan dimana saja. Keren bukan?!
Ketika anda compile menggunakan Aplikasi GUI Compiler LESS (misal; Crunch) maka akan dihasilkan kode CSS standar seperti dibawah ini:
body{
background:#262626;
}
#WadahObjek{
margin:0 auto;
width:650px;
}
.objek{
display:inline-block;
width:150px;
height:150px;
background:#191919;
margin:25px;
}Jika anda ganteng pasti anda paham...
Mixin
Mixin memungkinkan kita untuk menanamkan sifat-sifat kelas ke dalam kelas lain dengan hanya memasukan salah satu nama kelas. Hampir sama seperti halnya variabel, tetapi keseluruhan sifat kelas akan mempengaruhi kelas lainnya. Mixin juga dapat berperilaku seperti fungsi, dan mengambil argumen. Masih bingung? Lanjut...!
Anda tahu bagaimana cara membuat lingkaran untuk objekSatu? Cukup dengan mengeset radius border sebesar-besarnya seperti contoh dibawah ini:
#objekSatu{
border-radius:9999px;
}Maka browser akan menampilkan objek dengan bentuk kurang lebih seperti dibawah ini:
Namun harus diingat sejak penggunaan CSS3, jika ingin objek tersebut dapat ditampilkan sempurna pada semua browser maka kita harus menambahkan vendor prefix -webkit- dan -moz- sebagai cara terbaik. Maka kurang lebih kita bisa menuliskannya seperti dibawah ini:
#objekSatu{
-webkit-border-radius:9999px;
-moz-border-radius:9999px;
border-radius:9999px;
}Hmmm... Bagaimana jika ada objek lingkaran lain yang jumlahnya banyak dan harus diberi sifat serta vendor prefix sama seperti itu? Misal 20 objek lingkaran... Huh!!! Sangat melelahkan...
Tenang... LESS membuat pendefinisian mixin menjadi lebih sederhana dan mudah. Pendefinisian mixin pada LESS sebenarnya hampir sama dengan bahasa pemrograman lainnya. Penulisan mixin LESS hampir sama dengan CSS standar terutama dalam penggunaan grup CSS. Hampir sama dengan penulisan variabel, hanya saja kita menggunakan simbol "." (titik) untuk mendeklarasikan mixin, seperti contoh dibawah ini:
@bulatan: 9999px;
.SudutBulat {
-webkit-border-radius: @bulatan;
-moz-border-radius: @bulatan;
border-radius: @bulatan;
}
#objekSatu {
.SudutBulat;
}
Dan sekarang, kita hanya cukup memasangkan .SudutBulat pada semua objek yang akan dibuat lingkaran tanpa perlu menambahkan sifat-sifatnya (border-radius dan vendor prefix) lagi. Jika suatu hari kita ingin mengubah nilai bulatan, cukup ganti nilai pada variabel @bulatan maka semua objek yang memiliki sifat sama akan ikut berubah tanpa harus diubah satu persatu. Kereeeeennn!!! Namun hati-hati jangan sampai terjadi bentrok dengan class milik CSS. Memang cukup sulit untuk membedakannya, namun saya yakin anda paham maksud penggunaan mixin pada LESS.
Parametric Mixin
Penambahan parametric mixin membuat penulisan sifat-sifat kelas menjadi lebih fleksibel. Parametric mixin merupakan cara penyisipan dan atau penambahan sifat baru dari sifat mixin yang telah ada tanpa mempengaruhi mixin asal. Bingung lagi ya???
Ayo kita lanjutkan lagi... objekSatu telah diberi sifat lingkaran, dan kita ingin membuat sudut rounded dengan radius baru pada objekDua, namun dengan tetap memanfaatkan sifat-sifat yang sudah tersedia pada mixin objekSatu, sehingga kita tidak perlu membuat mixin baru. Bagaimanakah caranya? Perhatikan deklarasi parameter dibawah ini:
@bulatan: 9999px;
.SudutBulat (@radius: @bulatan){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
Pendeklarasian parametrik mixin yaitu dengan menambahkan tanda kurung "( )" setelah nama mixin. Didalam tanda kurung tersebut kemudian ditambahkan variabel. Variabel pada contoh diatas menggunakan nama variabel @radius yang memiliki nilai sama dengan variabel @bulatan yaitu 9999px. Kemudian nilai-nilai pada mixin diubah dengan variabel @radius, ini berarti nilai default dari variabel @radius adalah 9999px, namun ini bersifat default yang bisa saja nilai variabel @radius tersebut diganti sesuai kebutuhan. Tambah bingung ya? Perhatikan penggunaan mixin dibawah ini:
#objekSatu {
.SudutBulat;
}
#objekDua {
.SudutBulat(30px);
}Perhatikan dengan seksama, bahwa objekSatu menggunakan variabel @radius dengan nilai default yaitu 9999px. Hal ini karena nilainya tidak diubah. Sedangkan pada objekDua nilai untuk variabel @radius diubah menjadi 30px. Sehingga nilai default untuk variabel @radius akan diubah menjadi 30px dan diberlakukan hanya untuk objekDua. Sehingga objekDua jika ditampilkan pada browser akan tampak seperti dibawah ini:
Mudah-mudahan paham maksud dari Parametric Mixin, jika anda paham maka tambah ganteng...
Operasi
Salah satu fitur hebat LESS lainnya adalah kemampuan untuk menggunakan operasi matematika didalam stylesheet. Mungkin kedengarannya sangat membosankan jika sudah berhubungan dengan matematika, namun hal ini sangatlah bagus untuk LESS. Operasi memberikan keleluasaan menambah, mengurangi, membagi dan mengalikan nilai properti dan warna, memberikan Anda kekuatan untuk menciptakan hubungan yang kompleks antar sifat. Bagaimana operasi matematika digunakan pada LESS?
Pada contoh terdapat 3 objek yang sudah kita berikan gaya tertentu, namun belum ditambahkan garis bingkai (border) dan warna garis bingkai (border color) pada objek tersebut. Misal;
- Kita ingin menentukan tebal garis bingkai sebesar 5% dari tinggi atau lebar objek,
- Kita ingin menentukan warna garis bingkai
Maka kita tuliskan operasi matematiknya kedalam stylesheet, seperti dibawah ini:
@TebalGaris: @GarisTepi * 0.05;
Kemudian warna garis diambil dari perkalian variabel @WarnaTiga dengan 3, seperti dibawah ini:
@WarnaTiga: #111;
@WarnaGaris: @WarnaTiga * 3;
atau
@WarnaGaris: @WarnaTiga * #222;
Awalnya memang cukup membingungkan, namun saya yakin anda akan memahami setelah melakukan beberapa kali uji coba. Harus diingat bahwa; menambahkan atau mengurangi dengan #000 tidak akan memberikan efek, dan penggunaan #fff merupakan efek masimal.
Setelah kita menentukan variabel untuk garis bingkai maka kita bisa menerapkannya pada garis bingkai seperti dibawah ini:
border: @TebalGaris solid @WarnaGaris;
Sehingga objek akan menjadi seperti gambar dibawah ini:
Mudah bukan? Khusus untuk warna, kita bisa menggunakan fungsi saturasi yang lumayan cukup rumit dan kompleks.
Fungsi Warna
LESS menyediakan beberapa fungsi warna berikut ini:
- darken() dan lighten(), digunakan untuk menambahkan warna hitam dan putih (lebih gelap dan lebih terang)
- saturate() dan desaturate(), untuk menentukan sebuah warna lebih "berwarna" atau "grayscale"
- fadein() dan fadeout(), untuk menambah atau mengurangi transparansi
- spin(), digunakan untuk memodifikasi rona (hue) warna
Jika, misal, kita ingin membuat warna garis pinggir (border color) menjadi desaturasi untuk mendapatkan warna yang mendekati grayscale, maka kita bisa menggunakan desaturate seperti dibawah ini:
@WarnaGaris: desaturate(@WarnaTiga, 100%);
Bahkan kita bisa memanfaatkan output dari hasil operasi suatu warna kedalam operasi warna lainnya, seperti dibawah ini:
@WarnaGaris: darken(desaturate(@WarnaTiga, 100%),20%;
Semua operasi warna bisa menggunakan warna (Hex) atau persentase sebagai parameternya, kecuali spin. spin menggunakan bilangan bulat (integer) antara 0 sampai dengan 255 dan tidak menggunakan persentase untuk memodifikasi rona (hue) warna, misal:
@WarnaGaris: spin(@WarnaTiga, 100);
Nested Rule
Ketika kita merancang suatu halaman web yang kompleks menggunakan CSS, kadang kita akan dihadapkan pada seleksi berantai (atau ada yang menyebutnya parent child, ada yang menyebutnya pewarisan) untuk elemen tertentu dalam DOM. Nested Rule didalam LESS digunakan untuk menyederhanakan penulisan nama selektor yang panjang menjadi lebih sederhana dan mudah. Didalam LESS kita bisa menempatkan suatu selektor didalam selektor lainnya. Hal ini membuat pewarisan (nest) menjadi lebih jelas dan lebih pendek. Dibawah ini contoh pewarisan atau pengelompokan CSS standar:
#header {
border-width: 1px
}
#header h1 {
font-size: 20px;
font-weight: bold;
color: #ddd
}
#header h1 a {
text-decoration: none;
}
#header h1 a:hover {
color: #dfe
border-width: 2px
}Perhatikan contoh kode penulisan CSS standar diatas. Sebenarnya ketika kita menuliskan turunan selektor yang hanya satu atau dua turunan, hal ini masih dipahami dan mengerti dengan baik. Namun ketika jumlah selektor turunan dari selektor utama sudah mencapai 4 sampai 5 selektor, masalah sudah mulai bermunculan, dari mulai penulisan yang lebih panjang, dan visualisasi penyusunan hirarki yang tidak nyaman dilihat alias berantakan. Dengan LESS kita dengan mudah menuliskan pengelompokan utama dan kemudian menuliskan turunannya didalam kelompok utama. Misal, kode contoh diatas kita modifikasi menjadi aturan pewarisan LESS dengan meniru struktur DOM, sehingga menjadi seperti dibawah ini;
#header {
border-width: 1px;
h1 {
font-size: 20px;
font-weight: bold;
color: #ddd;
a {
text-decoration: none;
&:hover {
color: #dfe;
}
}
}
}Jika kita perhatikan contoh kode aturan pengelompokan LESS diatas, ada satu bagian yang berbeda dalam penulisan pseudo-class. Untuk penulisan pseudo-class kita menggunakan simbol "&" yang bisa berarti "ini" atau "dan".
Namun, Nested Rule untuk preprocessor LESS berefek pada kenyamanan penulisan sintak didalam teks editor. Ketika saya mulai menuliskan sintak-sintak CSS dengan prepocessor LESS, hampir semua teks editor yang digunakan tidak mampu menampilkan visualisasi syntax-highlighter yang nyaman untuk diperhatikan, terutama dari sisi pewarnaan sintak, saya bahkan merasa pewarna sintak LESS sangat kacau ketika menggunakan pseudo-class. Ini menjadi perkerjaan rumah para pengembang plugin teks editor untuk menciptakan syntax-highlighter khusus preprocessor LESS.
Crunch sepertinya memang diciptakan khusus untuk Teks Editor LESS dan Compiler LESS, dan untuk hari ini bagi anda yang ingin belajar menulis preprocessor LESS, saya merekomendasikan aplikasi GUI LESS yang satu ini. Nyaman, ringan, mengenal syntax LESS dengan baik, compiler terintegrasi, dan terintegrasi debug untuk mengetahui kesalahan penulisan.
Mengimpor File LESS
Akhirnya, ini biasanya dilakukan sebagai langkah terakhir yaitu dengan mengimpor file LESS. Membagi file-file LESS sesuai dengan penggolongan tertentu adalah cara terbaik dari pada Anda harus menuliskannya hingga 5000 baris dalam satu file.
Mengimpor satu file ke file lainnya didalam LESS sangatlah sederhana, yaitu:
@import "warna.less";
Bahkan kita dapat menghilangkan ekstensi LESS dengan hanya menuliskan:
@import "warna";
Kita dapat membagi-bagi file LESS sesuai relevansinya menjadi beberapa file terpisah. Mungkin kita bisa saja menggolongkan file-file LESS itu menjadi seperti dibawah ini:
- CSS Reset atau Normalize
- Warna
- Huruf dan tipografi
- Elemen-elemen UI
- Style utama halaman
- ...dan pengelompokan lain secara relevan sesuai aturan yang tergantung pada proyek Anda
Sebagai contoh, anda dapat melihat bagaimana developer
Twitter Bootstrap membagi-bagi file LESS kedalam beberapa file sesuai kelompoknya. Hal seperti ini akan terlihat lebih profesional dan lebih mudah dalam pengelolaan.
Anda mungkin berfikir bahwa menggunakan metode impor justru akan meningkatkan HTTP Request yang tidak perlu sehingga akan memperlambat waktu load halaman anda, dan itu betul! Namun kita harus ingat bahwa yang akan kita gunakan adalah file LESS sebagai bahan mentah yang kemudian dikonversi sehingga menjadi file CSS biasa. Jika kita memahami dengan baik, maka tidak peduli lagi, akan seberapa banyak file-file LESS itu digolongkan dan dipisahkan, karena pada akhirnya, semua bagian-bagian file LESS tersebut akan digabungkan menjadi satu file CSS baru melalui impor. Jadi, jangan takut melakukan impor. Karena hal ini akan sangat membantu kita dalam penyusunan struktur kode pada proyek yang sedang kita kerjakan.
Kesimpulan
Begitulah kurang lebih tentang Preprocessor LESS dan penulis secara pribadi berharap bahwa setelah menulis dan atau membaca artikel yang panjang lebar ini, kemudian berkembang minat para pengembang CSS di Indonesia untuk mulai menggunakan bahasa LESS. Saya merasa bahwa LESS telah melakukan perubahan cukup besar dalam tata cara penulisan bahasa Stylesheet.
Jika anda merasa tidak puas dengan artikel diatas, silahkan kunjungi dokumen resmi LESS untuk memeriksa kemungkinan terjadi perubahan yang lebih menarik. Selain itu, karena LESS dikembangkan sebagai Open Source anda bisa bergabung dan terlibat didalamnya. Anda bisa melaporkan masalah yang ditemukan (bug), pencabangan (fork), atau sekedar memantau (watch) perkembangan terbarunya melalui
GitHub.
Terima kasih atas waktu dan kesempatannya untuk membaca artikel ini (yang ditulis hampir 1 minggu), semoga ada manfaat yang bisa diambil. Selamat belajar dan Happy Blogging :)
