What is haml ?
At its core, Haml is a lightweight markup language.
Its, HTML Abstraction Markup Language
Haml makes writing HTML much easier, and when I say “much easier” what I really mean is “you won’t believe how much time you can save by using Haml.” In my opinion, it’s even more of an obvious time saver than Sass. Many developers take one look at Sass and think, “Neat! But I don’t really see a need for it.” With Haml, almost every developer, whether they would ever consent to use it or not, should immediately see the intense timesaving benefits that it brings.
Advantages
The main disadvantage of using HAML over HTML is simply that HTML is just about universal among web developers, where as the HAML community is still a relatively small community. This would undoubtedly make finding developers to work on your project in the future a more daunting task.
You never need to worry about missing a closing tag because the HAML parser will throw an exception and give you a line number. It’s quick, it’s short, it’s legible.
- easy to read and visually expresses your DOM hierarchy
- code is shorter as closing tags are eliminated
Difference between html and haml
Browsers only understand HTML. HAML is just a templating language that gets transformed into HTML (e.g. same final output). If you find the HAML syntax to be easier than HTML then go for it.
Who can use
Everyone who writes HTML can use Haml in some respect. Sure, you won’t use all of the features, but I’m sure you don’t use all of Photoshop’s features either but you still fire it up it on a daily basis.
My point is, if you’ve never written a line of Ruby in your life and don’t plan to, don’t let that scare you off from Haml. It’s still immensely fun.
Into Action
The beauty of Haml is that it’s “DRY”, meaning there’s been an attempt to strip out as much of the annoying inherent HTML repetition as possible.
Haml is whitespace dependent, meaning it uses the visual structure of your code to determine the HTML output.
HTML:
<p>Hi I'm HTML paragraph</p>
Here this small single line has repetition, the starting and closing tag obviously.
But,
HAML,
“impresionante it’s done :D”.
You would say “No it isn’t enough” , I need more examples :
We are using traditional html since logs with all its tags how can we implement them here in haml, your concern is right lets see.
Classes and Ids
Same (.) & (#) :
You want to say something now 🙂



After compilation the HTML goes like:



Just the game of % and identation.
Different HTML Tags
Now you will think about tags that aren’t common, like footer, section, or may be anyThing
So HAML does not care about what tags are, just follow the syntax and all is yours.
See,
Here comes your real concern, Can i use HAML syntax in my HTML,
So offcourse it’s, Yes
Mixing HAML with Your HTML
Go with an example:
Compiling HAML to HTML
Since long we are trying the code and talking about compilation, now its time to compile it, but before going to command line, lets use some handy online tools.
Here is online compilor side by side, just type in or paste your code and get compiled haml easily, Handy !!
You can directly install HAML:
gem install haml
For local usage, if you are mac user you got lucky here, a special tool for you is: chocolatapp
You can checkout codekit multipurpose.
Check out Live Reload, that is always infront of you.
Conclusion
If you enjoyed using Sass, less and want to have same feeling for html, then HAML is a star for your innocent eyes :p.
Yes dont forget to checkout the official site of HAML .
Nice post! I love HAML and use it when I code! Thanks for the clear explanation on HAML and its advantages. Another interesting post idea would be on Jade. Keep up the good work! 🙂
In my opinion, Jade is much easier and powerful than HAML, and is widely used.
yea definitely as jade is heavily influenced by HAML and support javascript/nodeJs and HAML is good for ruby guys, as the technology goes on it becomes handy, same with jade here. Although its good to have a look over Emmet, In my next post i’ll try to cover them. Happy Frontending 😉
Emmet seems to speed up the process of writing html even more. http://www.sitepoint.com/faster-workflow-mastering-emmet-part-1/
Obviously emmet is next to HAML its amazing, although nice post, thanks 🙂