ドットインストールのHaml動画のまとめ

次の職場でHamlっていうのを使うらしいのでまとめてみました。

Hamlとは？

htmlを簡単に記述するための記法、またはそこからHtmlを自動生成するための gem のこと。
例えば以下のようなHamlは・・・

!!!
%html
    %body
        hello world!

次のようなHtmlに変換される。

<!DOCTYPE html>
<html>
  <body>
    hello world!
  </body>
</html>

準備

hamlをインストールする。

$ gem install haml

基本的な使い方

haml記法で書いたファイルを保存して、以下のコマンドを実行しhtmlに変換する。

$ haml index.haml index.html

またはヘルプは以下のコマンドで確認できる。

$ haml -help

HTML5形式で出力する

hamlは -f オプションで出力形式を指定できる。
-f ・・・出力形式を指定する。
-q・・・属性の指定時にシングル（既定値）ではなくダブルクォーテーションを使う。

以下のコマンドを実行すれば、hamlをHTML5形式で出力する。

$ haml -q -f html5 index.haml index.html

書き方

コメントの入力には「/」を使う。

/ コメント

また、htmlに変換しないコメントは「-#」を使う。

/コメント
-# comment

これをHTMLにコンバートすると・・

<!- コメント ->

「-#」で書いたコメントはHTMLに変換されていないのでOK。

属性

Ruby風、Html風、ショートカット的な書き方の３つがあるとです。
まずはRuby風な書き方。

%div{:id=>"main", :class=>"myClass"}

次に、HTML風な書き方。

%div(id="main" class="myClass")

属性はよく使うので、ショートカット的な書き方も。

%div#main.myClass

さらにはdivもよく使うので省略可能。

#main.myClass

全部以下のようなHTMLに変換されまーす。

<div class="myClass" id="main"></div>

cssとかjavascriptを埋め込む（フィルター）

cssとかjavascriptもHaml記法で簡単に埋め込める。

%body
    hello world!
    :css
      .myStyle {
        color: red;
      }
    :javascript
      alert(1);
      if(1) {
        alert(2);
      }

<body>
    hello world!
    <style>
      .myStyle {
        color: red;
      }
    </style>
    <script>
      alert(1);
      if(1) {
        alert(2);
      }
    </script>
</body>

「:css」みたいに：の後にしているするのがフィルター。他にも escaped（文字列をエスケープした形式で出力してくれる）とかがある。

Rubyコードを埋め込む

RubyのgemなのでRubyコードを埋め込める。

%p total is #{5 * 3}  -#出力の中に埋め込む
%p= Time.now         -#タグの中に出力する
- x = 5                       -#式を評価するだけ
%p= x
- (1..10).each  do |i| -#ループする
    %p= i

<p>total is 15</p>
<p>2016-12-13 21:00:41 +0900</p>
<p>5</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>