Membuat Dropdown Menu menggunakan Less.js

jasa pembuatan design website di surabaya

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 variabelmixinoperasi, 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.

Leave a Reply

Your email address will not be published. Required fields are marked *