Membuat Menu Navbar Menggunakan LessJS

Pada kesempatan kali ini saya ingin membahas tutorial membuat menu navbar menggunakan CSS Preprocessor LessJS :D

Sebelumnya saya akan menjelaskan secara singkat mengenai LessJS. LessJS merupakan CSS preprocessor yang dibuat menggunakan bahasa pemrogramman Javascript. Less bukanlah bahasa pemrograman baru dalam melakukan styling pada halaman web, karena browser hanya mengenali CSS saja untuk melakukan styling, namun dengan menggunakan Less ataupun CSS preprocessor yang lain (SASS). Berikut kelebihan menggunakan CSS Preprocessor dalam melakukan styling halaman website:

• Lebih mudah mengelola file CSS menjadi lebih terstruktur
• Reusable, karena bisa menyimpan sebuah value kedalam variable
• Dapat menyisipkan operasi aritmatika
• Mudah digunakan
• Dan masih banyak fitur yang lainnya

Untuk lebih jelasnya dalam memahami CSS Preprocessor, LessJS khususnya langsung saja kita implementasikan dalam membuat sebuah menu navbar sederhana seperti gambar dibawah ini:

1. Buat folder bernama belajar-less

2. Download dan Extract File Less.JS

Untuk memulai coding, download file Less disini terlebih dahulu.
atau bisa didownload menggunakan bower, dengan asumsi sudah menyertakan dependency bower kedalam project anda. berikut command untuk menginstall Less:

bower install less --save

setelah didownload extract file, kemudian file tersebut terdiri atas direktori-direktori sebagai berikut

3. Copy file Less ke direktori project

setelah mengextract l buka folder dist, terdapat file less.js dan less.min.js. pada kali ini saya mengcopy file less.min.js untuk disertakan kedalam direktori project yang akan dibuat. Skema  yang digunakan pada project ini menggunakan client-side. Yaitu compile dilakukan pada client, selain menggunakan mekanisme client-side compiling, terdapat mekanisme server-side compiling. Untuk mengetahui perbedaannya dapat dilihat disini :D

4. Selanjutnya panggil file less dan file css  yang akan digunakan untuk styling halaman web. pada halaman index.html yang Contohnya file tersebut diberi nama style.less, berikut screenshotnya: 

ini adalah isi file index.html secara lengkap:

5. File style.less adalah file less yang nantinya akan di compile menjadi file css. Untuk isi file style.less sebagai berikut:

pada line 1 dapat dilihat file melakukan import file less yang lain yaitu variables.less. file variables.less berisi variabel-variabel yang dapat di reuse pada project. Berikut isi file variables.less yang berisi warna-warna yang disimpan kedalam variabel:

6. Setelah file-file tersebut lengkap dibuat, jalankan pada browser. Hasilnya menjadi seperti berikut:

Sekian tutorial membuat navbar menggunakan LessJS :D

Referensi

http://lesscss.org/