Hamlの基本箇所についての復習①(基本的な書き方)

はじめに

Hamlの書き方について書いていきます。
個人的にhtmlに対して苦手意識があったのですが、
hamlでビューファイルを書くようになってからは、苦手だと思うようになくなりました。

内容

Hamlの基礎について書いていきますが、
導入方法などについては別途投稿したいと思います。
飽く迄、この記事はHamlの書き方の基礎についてのみ書いていきます。

実行

例えば、以下のようなhtmlファイルがあったとします。（一部を切り出し）

index.html

<div class = "content1">
 <div class = "word1">
  <p>こんにちは</p>
 </div>
 <div class = "word2">
  <p>はじめまして</p>
 </div>
</div>
<div class = "content2">
 <p>こんばんは</p>
</div>

これをHamlで書き直す（又は変換）すると以下のようになります。

index.html.haml

.content1
  .content1__word1
    %p こんにちは
  .content1__word2
    %p はじめまして
.content2
  %p こんばんは

この書き方ならば</div>のような閉じタグを書く必要がないので、見た目にもスッキリしたコードになります。
また、CSSの書き方の一つであるsassとも非常に相性が良いです。（別途投稿したいと思います）

終わりに

今回はHamlの基礎的な書き方のみの記事になりましたが、実際にHamlを使用してコードを書くには様々なルールを守る必要がある他、事前の導入も必要です。
いずれ、それらについての記事も書きたいと思います。