SimpLESS, Membuat LESS Menjadi Lebih Simple

SimpLESS, Membuat LESS Menjadi Lebih Simple

Masalah perulangan kode-kode properti elemen dalam CSS memang cukup menjengkelkan bagi para front-end developer website. Terlebih lagi jika menyangkut daya dukung terhadap CSS3 yang mengharuskan…

Masalah perulangan kode-kode properti elemen dalam CSS memang cukup menjengkelkan bagi para front-end developer website. Terlebih lagi jika menyangkut daya dukung terhadap CSS3 yang mengharuskan kita menuliskan properti yang hampir sama atau bahkan sama persis berulang kali. Karena itulah muncul framework LESS yang memberikan kemudahan dalam proses membuat kode tampilan website.

Untuk memahami tulisan ini, Anda harus mengenal tentang LESS terlebih dahulu. Anda bisa mempelajarinya di tulisan saya sebelumnya yang berjudul Mengenal LESS Framework untuk CSS.

Masalah LESS

Dengan menggunakan LESS, kita memang bisa menghasilkan kode dengan cepat dan mudah dibandingkan dengan menggunakan CSS. Namun LESS tidaklah sempurna, bahkan sisi lemah LESS terletak pada hal yang krusial. Sekeren apapun fitur yang dimiliki oleh LESS, pada akhirnya website tetap membutuhkan file CSS sebagai kode tampilannya. Kita harus mengubah kode LESS tersebut menjadi kode CSS dengan menggunakan compiler di sisi server atau menyertakan Javascript untuk menghasilkan kode CSS setelahnya. Hal ini tentunya sangat mengganggu dalam proses pembuatan tampilan website. Proses yang berlapis ini merupakan kelemahan terbesar yang dimiliki LESS yang membuat beberapa front-end developer website enggan menggunakan LESS.

Mengenal SimpLESS

SimpLESS adalah aplikasi pada desktop yang berfungsi untuk melakukan proses kompilasi dari LESS menjadi CSS. Proses kompilasi yang sebelumnya dilakukan dengan menggunakan javascript pada sisi klien atau nodeJs pada sisi server digantikan dengan sistem drag and drop oleh SimpLESS. SimpLESS akan mengenali semua sintaks yang dimiliki oleh LESS dan mengubahnya menjadi kode CSS yang valid. SimpLESS juga memiliki sederet fitur yang cukup memanjakan pengguna LESS.

Fitur-fitur SimpLESS

  1. CSS-Minification yang secara otomatis menghapus karakter-karakter yang tidak penting dalam CSS sehingga file CSS hasil kompilasi berukuran sekecil mungkin.
  2. On-the-fly Compilation yang otomatis mendeteksi perubahan pada file .less yang telah terdaftar pada SimpLESS untuk segera dikompilasikan.
  3. Import Parsing yang akan mengenali kode @import untuk kemudian melakukan kompilasi terhadap file .less lain yang disertakan dengan @import.
  4. Error Display yang mendeteksi kesalahan pada sintaks LESS dan menampilkan baris kesalahan tersebut sebagai error.
  5. Auto Update yang menjaga SimpLESS tetap up-to-date setiap ada versi baru yang diterbitkan.
  6. Bootsrap Support yang mendukung penggunaan Bootsrap dengan LESS secara penuh.

Menggunakan SimpLESS

Untuk menggunakan SimpLESS sebenarnya cukup sederhana. Kita hanya perlu memasukkan proyek LESS kita ke dalam area SimpLESS dan menekan tombol compile pada file yang dikehendaki satu kali saja. Untuk selanjutnya, SimpLESS akan secara otomatis melakukan kompilasi setiap terjadi perubahan pada file LESS tersebut. Untuk lebih jelasnya, mari kita simak langkah-langkah berikut ini.

  1. Pastikan Anda telah meng-install aplikasi SimpLESS terlebih dahulu. Anda bisa mengunduh SimpLESS dengan gratis pada situs resminya di sini.
  2. Siapkan proyek website yang akan Anda buat CSS tampilannya dengan menggunakan LESS.
  3. Buka aplikasi SimpLESS yang telah ter-install pada computer Anda.

    Tarik file atau folder proyek dengan LESS ke dalam area SimpLESS

  4. Drag dan drop file LESS atau folder proyek website Anda ke dalam area aplikasi SimpLESS. Jika dalam folder proyek website Anda terdapat lebih dari satu file LESS, SimpLESS akan otomatis mendeteksi semua filetersebut.
    klik tombol refresh

    Klik tombol refresh untuk mengkompilasi LESS menjadi CSS

  5. Setelah semua file LESS yang Anda inginkan terdaftar pada SimpLESS, tekan tombol refresh/compile di sebelah kanan nama file LESS yang diinginkan untuk melakukan kompilasi dari file LESS menjadi file CSS untuk pertama kali.
  6. Untuk selanjutnya, setiap kali Anda melakukan perubahan pada file LESS tersebut, SimpLESS akan mengubahnya menjadi file CSS dengan nama yang sama.

Kesimpulan

SimpLESS memberikan banyak kemudahan bagi pengguna LESS. Selain itu, aplikasinya yang gratis dan mendukung banyak platform sistem operasi menjadikannya mudah digunakan di mana saja. Pengalaman saya selama menggunakan SimpLESS, saya bahkan hampir tidak menyadari adanya SimpLESS karena kode yang saya buat dengan LESS sudah terkompilasi menjadi CSS dalam hitungan detik. Tertarik mencobanya?

Tag: , , , ,

2 Comments

Leave Comment
  1. Nice info. Cuma, aku biasanya make CSS doang. Nggak pake LESS. Ya, belum terbiasa aja :)

Write Comment

Your email will not be published. The marked label is required.