Haml and Sass in html development

I was looking for excuse to try out HAML for some time. Let’s first see what it is. HAML is html templating syntax that does resemble Pythonian way of using indentation as syntax. It makes coding html easier, html more readable and on top of that makes enforcing standards easy. It comes as Rails plugin, which parses HAML syntax into html before serving. However HAML is so appealing that it has been ported to PHP as well.

Since I am starting new project, I figured let’s give HAML a whirl. It is all I thought it is and more. Coding html is really a pleasure and once I got used to it and figured out few kinks, it does add to productivity and clarity. Pages are easy to follow and have well organized code. What is really great is that you can use it in both Rails and PHP. Since I am still early into the project, if I decide that PHP would be better suited for current project, I can switch easily and still have all the templates work. I would need to recode Ruby to PHP though.

For example of syntax check PHP example and Rails example.

Now to make things even more exciting, Hampton Catlin who is creator of HAML came up with SASS, which is doing to CSS what  HAML did to XHtml. As far as Rails are concerned, just installing HAML will install SASS as well and you can just code CSS in files with .sass extension (in subfolder of stylesheet folder though).

While reading different takes on Haml which really got people excited quite a bit, I found interesting take on using ruby and haml and sass for development of static websites. This is not something I would do in this age of web2.0 but I bet some people can find this usefull. Here is the link.

Since this enables us to use script in CSS, maybe my longtime idea will be possible, to setup colors and maybe fonts in the beginning of the css, then when I want to specify color, I can say myorange, or myorange.lighter, or myorange.oposite.darker for example (I use myorange to distinguish it from named colors). I bet this is not that hard to implement and would make css files much more readable. I am not sure that I have time right now, however it would be neat to have it.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s