Karena tutorial “Membuat Dropdown Menu menggunakan CSS” sudah banyak, maka saya coba membuat dropdown menu menggunakan Less.js.
Apa itu Less.js??
Menurut website resminya (http://lesscss.org/) :
Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable
artinya (LESS: The Dynamic Stylesheet Language):
LESS merupakan ekstensi dari CSS, yang menambahkan perilaku dinamis seperti variabel, mixin, operasi, dan fungsi. LESS dapat dijalankan pada sisi klien (Chrome, Safari, FIrefox) maupun server (menggunakanNode.js dan Rhino)
Pengunaan LESS
1. Penggunaan pada sisi klien
Pengunaan pada sisi klien merupakan cara yang paling mudah untuk mulai menggunakan dan mengembangkan LESS. Untuk lingkungan produksi, dan terutama jika performa sangat penting, direkomentasikan untuk melakukan kompilasi LESS ke CSS menggunakan node atau perangkat lainnya.
<link rel="stylesheet/less" type="text/css" href="styles.less">
Download less.js di website resminya, lalu masukkan pada tag </head> sebagai berikut:
<script src="less.js" type="text/javascript"></script>
Pastikan stylesheet .less dimasukkan sebelum elemen di atas.
2. Pengunaan pada Sisi Server
Instalasi
Cara paling mudah untuk melakukan instalasi LESS pada server adalah melalui npm, package manager dari node. Instalasi dapat dilakukan dengan kode berikut:
$ npm install -g less
Pengunaan dengan Command-Line
Setelah selesai diinstalasi, kita dapat menjalankan compiler melalui command-line, seperti berikut:
$ lessc styles.less
Kode di atas akan menghasilkan kode CSS yang telah dikompilasi pada stdout, yang kemudian dapat dipindahkan ke file yang diinginkan, seperti berikut:
$ lessc styles.less > styles.css
Untuk menghasilkan CSS yang telah dikompresi, gunakan opsi -x
Contoh penggunaan Less.js dapat dibaca sendiri di website resminya (http://lesscss.org/) atau dari sumber-sumber yang lain.
Kali ini saya akan menggunakan Nodejs untuk menginstal Less dan mengcompile menggunakan command-line.