SimpLESS: sebuah LESS Compiler

Pada tutorial kali ini saya akan melanjutkan pembahasan yang sebelumnya tentang LESS.JS.
Pada tutorial sebelumnya kita telah berhasil membuat file navbar atau menu menggunakan Less.JS. Namun skema file dalam mengcompile menggunakan client-side, kita tidak tau bagaimana hasil file yang dicompile dalam format css standar karena file melakukan compile menggunakan AJAX process pada browser. Hal ini membuat sulitnya file less untuk di maintain oleh developer lain jika bekerja didalam sebuah team, oleh karena itu perlunya dilakukan compiling file yang berformat less menjadi file css standar.

Sebenarnya mengcompile file less sangat sederhana, menggunakan terminal atau command prompt pada pc yang sudah di install less hanya dengan menjalankan command seperti dibawah ini:

lessc <resource_less_file.less> <destination_css_file.css>

contoh:

lessc style.less style.css

Namun bagi para pemula yang baru mempelajari pemrograman, penggunaan terminal atau command prompt sangatlah asing. Nah berikut ini adalah cara melakukan compile file less menggunakan tool SimpLESS:

1. Download dan install simpLESS.

SimpLESS dapat didownload pada halaman resmi SimpLESS https://wearekiss.com/simpless.

Halaman download file SimpLESS

setelah didownload, install seperti biasa tinggal melakukan next->next->next->finish :D

2. Buka aplikasi SimpLESS, dapat dilihat seperti berikut tampilan aplikasinya

3. Drag and Drop File LESS yang akan dicompile. Berikut penampakan SimpLESS setelah dilakukan pemilihan file yang ingin di compile. Pada kasus ini saya memilih file style.less yang ingin dicompile

4. Compile file less

Untuk mengcompile file less klik tombol yang dilingkari merah pada gambar diatas.

Dengan menggunakan SimpLESS kita juga bisa membuat file css yang telah diminify, klik pilihan "minify" yang diberi warna merah

Jika sukses maka akan tampil notification seperti berikut

5. Selesai. Kemudian hasilnya akan menjadi file dengan format css standar seperti dibawah ini

Hasil compile menjadi file style.css

Hasil compile setelah dilakukan minify.

Sekian tutorial mengenai cara compile file LESS menggunakan SimpLESS. Happy Styling :D