Haml (HTML Abstraction Markup Language)

Cryptex Technologies
4 min readJun 14, 2022

By: Nishant Nagdeve Category: Ruby on Rails Technologies: Ruby on Rails

Introduction:

Haml is a markup language that is utilized to cleanly and just describe the HTML of any web record, without the utilization of inline code.

Haml functions as a replacement for inline page templating systems like PHP, ERB, and ASP. Be that as it may, Haml avoids the need for explicitly coding HTML into the template, since it is really an abstract depiction of the HTML, with a code to create dynamic content.

Features:

1. Whitespace active
2. well-formatted markup
3. DRY
4. Follows CSS conventions
5. Integrates Ruby code
6. Implements Rails templates with the .haml extension

Using Haml:

Haml can be used in three ways:
• as a command-line tool,
• as a plugin for the ROR,
• and as an independent Ruby module.

Step 1:
To install the Haml gem:
gem install haml

Step 2:
To run Haml from the command line, simply use:
haml input.haml output.html

Step 3:
To use Haml with Rails, add the accompanying line to the Gemfile:
gem “haml”

once it’s installed, all view records with the “.html.haml” extension will be incorporated utilizing Haml.

You can access the example factors in Haml templates the same way you do in ERB templates. helper methods are additionally accessible in Haml templates.

Ex:

# file: app/controllers/movies_controller.rb

# file: app/views/movies/index.html.haml

Same As/Compiled To:

HTML Elements

Element Name: % :

The percent character is set toward the start of a line. It’s followed quickly by the name of a component.

Ex:

Is Compiled to:

Any string is a valid component name; Haml will automatically create an opening and shutting tags for any component.

Attributes: { } or ( )

Ex:

Is Compiled to:

Class and ID: And #

The period and pound sign are acquired from CSS. They are used as shortcuts to specify the class and id attributes of an element, respectively.

Multiple class names can be specified in a similar way to CSS, by chaining the class names together with periods. They are placed immediately after the tag and before an attributes hash.

Ex-1:

Is Compiled to:

Ex-2:

Is Compiled to:

Doctype: !!!

While portraying HTML documents with Haml, you can have a record type or XML prolog produced automatically by including the characters.

Ex:

Is Compiled to:

Comments:
Haml supports two kinds of remarks: those that appear in the HTML output and those that don’t.

HTML Comments: /
1. The forward slash character, when put toward the start of a line, encloses all text after it by an HTML comment.

Ex:

Is Compiled to:

2. The forward slash can likewise wrap indented segments of code.

Ex:

Is Compiled to:

HAML Comments: -#

The hyphen followed promptly by the pound sign signifies a quiet remark. Any text following this isn’t delivered in the resulting report by any means.

Ex:

Is Compiled to:

Originally published at https://www.cryptextechnologies.com.

--

--

Cryptex Technologies

Cryptex specializes in developing open source web applications and software solutions across all domains and verticals using Ruby on Rails (ROR) technology