[アラフォプログラミング未経験]Hamlについて学んだみた
今回は、「Haml」について勉強してみましたー
というか、並行してそもそものHTMLやCSSもまたおさらいしてます。。。
まさに3歩進んで2.5歩下がってを繰り返して、少しずつ少しずつ進んでいく感じですね。
目次
Hamlとは?
Hamlとは、HTMLよりも簡単に書くためのビューテンプレートエンジンです。
公式サイトによると「マークアップは美しくあるべき」という原則に基づいて開発されました。
Hamlを使用することで、
「綺麗に」、「読みやすく」、「生産的に」
ビューを作成することができます。
〜カリキュラムより抜粋〜
HTMLもわかりやすかったけど、さらに簡単に綺麗に書けるとな?!
参考(英語ですが)
haml.info
Hamlの基本的な記法について
まずは一番シンプルにHamlを書く場合。
%p Hello!
と書くと%pをhtmlのpタグと認識して次のようなHTMLに変換してくれます。
<strong>Hello!</strong>
階層構造
「半角2つ」を使って階層構造を表すこともできます。
%gee %whiz 今日も良い天気だなぁ!
次のようなHTMLに変換されます。
<gee> <whiz> 今日も良い天気だなぁ! </whiz> </gee>
属性情報の付加
HTMLタグの属性情報は次のように記述すると
%div{id: "my-id"} Contents %div{class: "my-class"} Contents
HTMLに変換するときに付加されます。
<div id="my-id"> Contents </div> <div class="my-class"> Contents </div>