Tutorial Dasar CSS Preprocessor LESS Oleh: Christian Rosandhy Karena CSS standar udah terlalu mainstream,, nggak ada salahnya kita belajar salah satu CSS Preprocessor yang cukup terkenal, yaitu LESS. Disini kita akan mengenal 3 fitur dasarnya yang akan membantu kita coding CSS dengan lebih asyik.. Ga ada salahnya kita simak kok.. :) Salam sobat jagocoding.. Udah lama banget nih ya ane ga bikin tutorial lagi.. Secara, kehabisan ide duluan.. Bingung mau bikin tutorial apa lagi sekitaran CSS.. Hehehe.. Karena itu, kali ini saya mau sedikit share masih sekitaran di CSS juga.. tapi CSS yg ini agak beda dari yg pada umumnya, karena kita akan menggunakan bantuan library javascript preprocessor CSS yg cukup terkenal, yaitu LESS.. Buat yang belom tau,, LESS adalah CSS preprocessor yang akan sangat membantu pekerjaan kita di sekitaran CSS.. Untuk dokumentasi lengkap dan downloadnya, mampir aja ke http://lesscss.org. Fitur LESS inipun sebenarnya sangat banyak.. Tapi fitur yg paling saya suka adalah Nesting Selector, penggunaan variabel, dan Mixin.. Di tutorial ini kita akan mencoba ketiga fitur tersebut.. Pertama-tama, kita download dulu file javascript library Lessnya di http://cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js. Mau di download ataupun di panggil langsung di HTMLnya nggak masalah.. Dlm tutorial ini saya download aja deh, Sekarang kita ke HTMLnya. Bikin kerangka HTML utamanya seperti biasa seperti dibawah ini.. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>latihan CSS Less</title> <link rel="stylesheet/less" href="style.less"> <script type="text/javascript" src="js/less.min.js"></script> </head> <body> </body> </html> OK, dari potongan baris kode diatas, target library LESSnya disesuaikan dengan lokasi anda. Dan
yang paling penting, di tag link bagian atribut rel, kalau biasanya hanya bernilai "stylesheet" saja, untuk menggunakan less ini nilai atribut rel harus "stylesheet/less". target atribut hrefnya juga disesuaikan dengan lokasi file LESS kita.. Ingat ya,, ekstensinya harus LESS,, bukan CSS.. :D Fitur Nesting Selector Kalau sampai disini sudah dilakukan dengan benar, kita akan lanjut mengenal ketiga fiturnya.. yg pertama fitur Nesting Selector. Sebelumnya, kita isi tag body dengan beberapa tag dulu untuk percobaan ya.. <div id="container"> <div class="header"> <a href="index.html" class="judul">judul Website</a> </div> <nav> <a href="">home</a> <a href="">profile</a> <a href="">gallery</a> <a href="">about Us</a> </nav> </div> <div class="content"> Isi konten website </div> <div class="footer"> 2015. </div> Sejauh ini masih nggak ada hal yang berbeda ya? Sekarang kita ke CSS deh.. CARA BIASANYA,, kira-kira seperti ini nih untuk mendesainnya.. #container{ width:960px; margin:0px auto; position:relative;.clear{ clear:both;.header{ position:relative; padding:10px; background:#99aaff;.header a.judul{ font-family:'calibri',sans-serif;
font-size:24px; color:#fff; float:left;.header nav{ float:right;.header nav a{ color:#000; font-family:'calibri',sans-serif;.content{ padding:10px;.footer{ font-style:italic; background:#333; color:#ccc; Dari 38 baris tadi, hasilnya ya lumayan lah.. Sekarang, kita akan membuat hasil yang sama persis dengan fitur Nested Selector LESS. #container{ width:960px; margin:0px auto; position:relative;.header{ position:relative; padding:10px; background:#99aaff; a.judul{ font-family:'calibri',sans-serif; font-size:24px; color:#fff; float:left; nav{ float:right; a{ color:#000; font-family:'calibri',sans-serif;
.clear{.content{ padding:10px;.footer{ font-style:italic; background:#333; color:#ccc; clear:both; Apakah anda melihat sesuatu yang aneh? Ya,, Dalam fitur Nested Selector ini, selector yang mempunyai anak tidak lagi harus ditulis ulang seperti CSS biasa, melainkan bisa langsung ditulis didalamnya. Kalau kurang jelas, lihat gambaran kode dibawah ini : /*CSS BIASA*/ tag_1{...properti tag_1... tag_1 tag_2{ /*mengarah ke tag 2 yg merupakan anak dari tag_1*/...properti tag_2... /*LESS CSS*/ tag_1{...properti tag_1... tag_2{...properti_tag2... /*tag parent tidak perlu diketik ulang, asal ditaruh didalam tag parent yang bersangkutan*/ Semoga fitur Nested Selector ini bisa dimengerti ya.. Buat yang udah biasa bikin program yang berkurung-kurung sih pasti udah biasa banget sama model beginian.. :D Fitur Variabel Siapa kira variabel cuma ada di bahasa pemrograman aja? Dengan LESS, CSS pun juga bisa divariabelin.. Variabel di LESS ini mirip kayak PHP, nggak perlu deklarasi tipe data.. :D Kalo di PHP variabel didefinisiin pake simbol $, di LESS simbolnya adalah @. Coba saja kita edit file LESS kita tadi.. Pertama-tama kita buat variabel dulu seperti potongan kode dibawah, lalu panggil variabel
tersebut di bagian yang kita inginkan. @lebar_website:960px; @warna:#99aaff; #container{ width: @lebar_website;....header{... background:@warna; Keuntungan penggunaan variabel ini adalah, kita bisa menggunakan suatu nilai kapan saja dimana saja hanya dengan memanggil nama variabelnya saja. Fitur Mixins Ini adalah salah satu fitur paling asik yang bikin saya betah pake LESS.. :D Kalau dalam bahasa pemrograman, Mixin ini bisa disetarakan dengan Function. Sama seperti function, Mixin bisa dijalankan dengan inputan maupun tanpa inputan. Mixin ini sangat berguna untuk kita bisa membuat beberapa baris kode hanya dengan memanggil nama mixin atau fungsinya. Mixin ini paling asik diterapkan di CSS3. Anggaplah kita punya 4 tag yang akan kita berikan efek transisi otomatis. Cara CSS biasanya seperti ini : tag_1{ tag_2{ tag_3{ transition:0.5s; -moz-transition:0.5s; -webkit-transition:0.5s; -o-transition:0.5s; -khtml-transition:0.5s; -ms-transition:0.5s; transition:0.75s; -moz-transition:0.75s; -webkit-transition:0.75s; -o-transition:0.75s; -khtml-transition:0.75s; -ms-transition:0.75s; transition:0.25s;
tag_4{ -moz-transition:0.25s; -webkit-transition:0.25s; -o-transition:0.25s; -khtml-transition:0.25s; -ms-transition:0.25s; transition:1s; -moz-transition:1s; -webkit-transition:1s; -o-transition:1s; -khtml-transition:1s; -ms-transition:1s; Sangat panjang bukan? Ya memang sih yang bikin panjang itu sebenernya si prefix -moz-, -webkit-, dan teman2nya.. Tapi dengan mixin, sekian baris program tadi dapat dipersingkat menjadi seperti ini : /*MIXIN. Formatnya mirip seperti class, tapi ada kurung buka dan tutupnya*/.transisi(@durasi){ transition:@durasi; -moz-transition:@durasi; -webkit-transition:@durasi; -o-transition:@durasi; -khtml-transition:@durasi; -ms-transition:@durasi; tag_1{.transisi(0.5s); tag_2{.transisi(0.75s); tag_3{.transisi(0.25s); tag_4{.transisi(1s); /*selesaii~*/ Seperti yang kita lihat,, format penggunaan mixin adalah dengan simbol titik.. Akan tetapi berbeda dengan selector class, mixin meminta parameter. Dalam contoh saya buat parameter @durasi, supaya fungsi.transisi() bisa dipanggil oleh siapapun hanya dengan mengganti nilai durasi sesuai keinginan.
Sebenarnya masih banyak fitur asik lainnya yang akan saya share lagi kedepannya. Semoga tutorial ini bisa memperluas wawasan kita.. Terima kasih atas perhatiannya~ :D Tentang Penulis Christian Rosandhy