Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted February 21st, 2016
HAML

HAML is a lightweight mark-up language, it stands for HTML Abstraction Mark-up Language. HAML is a new way to write HTML, because it makes it much easier to do so.

Advantages

  • Don’t need to worry about a missing closing tag, since HAML parses will tell you there is an exception and it will give you a line number as well.
  • It’s easy to read.
  • The code is much shorter as the closing tags are eliminated.

HAML is just a templating language that gets transformed into HTML. And since browsers only understand HTML it will be much easier for you to write your code in HAML.

Install

To install HAML just use the ruby command line and type in:

$ gem install haml

Few Examples

Here I will show you the difference between a HTML paragraph and a HAML paragraph.

HTML

<p>Hello world.</p>

HAML

%p Hello world.

Classes and Id’s

HAML also uses the same tags for Classes and Id’s, here you can see the difference between the two.

HTML

<ul id="randomId">
    <li class="randomClass"></li>
</ul>

HAML

 %ul#randomId
    %li.randomClass

Div

HTML

<div id="randomDiv"></div>

HAML

#randomDiv

Pretty simple huh? I’ll give you a more detailed example.

HAML

#container
    .box
        %h2 Text
        %p More text
        %ul.mainList
            %li 1
            %li 2
            %li 3

After you typed the code out in HAML, and you have compiled it, it will look like this:

HTML

<div id="container">
    <div class="box">
        <h2>Text</h2>
        <p>More text</p>
        <ul class="mainList">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>

So, now you might ask, what about the not so common HTML tags. Like footer, section or span. That’s the great thing HAML doesn’t really care about that, as long as you use the syntax, you’re fine. Small example:

HAML

%section
    .info
        %span This is a span

%footer
    %p This is a footer

HTML

<section>
    <div class="info">
        <span>This is a span</span>
    </div>
</section>

<footer>
    <p>This is a footer</p>
</footer>

But say you want to mix your HAML with your HTML. Lucky for you it’s possible to do so, if you just keep using the HAML syntaxes. I will give you another small example:

HAML

#randomDiv
    %p This is a link to <a href="www.youtube.com">Youtube</a>

HTML

<div id="randomDiv">
    <p>This is a link to <a href="www.youtube.com">Youtube</a>
</p></div>

I hope to have informed you enough about HAML and how to use it as well. Thanks for reading my blogpost.

Posted by Jacob Farhaoui

Leave a Reply

Your email address will not be published. Required fields are marked *