BLOG

Mengenal dan Pengertian HAML (HTML abstraction markup language)

シックス , BLOG
0
2507

Front-end Programmer hampir dipastikan selalu berurusan dengan tampilan atau style, terutama yang menggunakan CSS. Menulis kode-kode CSS seringkali menjadi pekerjaan yang menjemukan, bahkan menjengkelkan apabila perlu berulangkali menuliskan sintaks-sintaks yang hampir sama untuk elemen-elemen yang berbeda. Masalah lain yang sering timbul adalah penulisan selector yang panjang untuk menunjukkan sebuah elemen turunan. Belum lagi masalah yang timbul terkait cross-browsing yang membuat Anda wajib menuliskan sebuah properti tampilan berkali-kali untuk tiap mesin peramban yang umum digunakan. Hal-hal tersebut tentunya cukup mengganggu dalam proses membangun tampilan sebuah web yang baik, apalagi kalau dikerjakan oleh seorang pemula dalam penggunaan CSS. Untungnya saat ini telah ada framework yang mampu memberikan solusi bagi kendala-kendala dalam pembuatan kode CSS tersebut yang bernama LESS.

Apa LESS itu?

LESS adalah preprosesor CSS yang memberikan sentuhan dinamis kepada CSS dengan fitur variabel, mixin, serta operasi dan fungsi yang dimilikinnya. Tujuan dibuatnya LESS sendiri adalah untuk memberikan kemudahan dan keringkasan dalam membangun tampilan website yang menggunakan CSS. Proses kompilasi LESS menjadi CSS dapat berjalan baik di sisi klien dengan javascript maupun di sisi server dengan bantuan Node.js dan Rhino. Berkas LESS yang memiliki format *.less dan akan diubah menjadi file berformat CSS oleh file javascript less.js pada sisi klien atau melalui kompilasi pada sisi server.

 

Apa Saja Fitur yang Dimiliki LESS?

Pada saat menulis HTML dan CSS mungkin terasa sedikit melelahkan, membutuhkan banyak waktu seperti menutup tag dalam HTML atau berulang kali harus mencari nilai warna heksadesimal di CSS.

Walaupun masalah ini adalah masalah kecil namun akan membuat waktu kita menjadi tidak efisien. Ada beberapa solusi untuk mengatasi permasalahan ini diantaranya adalah menggunakan bahasa preprocessor.

Preprocessor adalah program yang mengambil satu jenis data dan mengubahnya menjadi jenis data lainnya. Dalam kasus HTML dan CSS, beberapa bahasa preprocessor yang lebih populer termasuk Haml dan Sass. Haml diolah menjadi HTML dan Sass diolah menjadi CSS.

HAML
Haml, yang dikenal sebagai bahasa markup abstraksi HTML (HTML abstraction markup language), adalah bahasa markup dengan tujuan memberikan kemampuan untuk menulis markup yang indah. Kode yang ditulis di Haml kemudian diproses menjadi HTML. Haml menggunakan kode yang rapi dan markup yang terstruktur dengan baik, memberikan pengalaman menyenangkan bagi siapa saja yang menulis atau membacanya.

Instalasi HAML
Haml membutuhkan Ruby untuk dikompilasi ke HTML, jadi langkah pertama untuk menggunakannya adalah memastikan Ruby terinstal. Untuk anda yang menggunakan Mac OS X Ruby telah terinstal didalamnya, dan namun ada yang menggunakan Windows, anda dapat mengunjungi Windows Installer untuk panduan instalasinya. Setelah Ruby terinstal, Instalasi haml perlu dijalankan dari command line.

0 Comments

×