hamlのまとめ #Ruby


!!!
%html{:lang => "ja"}
  %head
    %meta(charset="UTF-8")
  %body

    / フィルター
    :css
      .myStyle {
        color: red;
      }
    :javascript
      alert(1);
      if (1) {
        alert(2)
      }

    / 実体参照
    %div
      :escaped
        <html>
        </html>

    / rubyの式評価
    %p total is #{5 * 3}
    %p= Time.now
    - x = 5
    %p= x

    - (1..10).each do |i|
      -# %p= i
      %p{:id => "item_#{i}"} #{i}

    / divの色々な書き方
    %div{:id => "main", :class => "myClass"}
    %div(id="main" class="myClass")
    %div#main.myClass
    #main.myClass

    #main
      .subMenu

    / %を付けると開始・終了タグが付く
    %p
      hello
    %p hello(字下げされない)
    %ul
      %li
        item
      / 小要素の改行を無視する「<」
      %li<
        item
  / bodyの終わり(htmlにも反映される)
  /
    複数行
    複数行
    複数行
  -# コメント(htmlには反映されない)
  -#
    コメント
    コメント
    コメント


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <!-- フィルター -->
    <style>
      .myStyle {
        color: red;
      }
    </style>
    <script>
      alert(1);
      if (1) {
        alert(2)
      }
    </script>
    <!-- 実体参照 -->
    <div>
      &lt;html&gt;
      &lt;/html&gt;
    </div>
    <!-- rubyの式評価 -->
    <p>total is 15</p>
    <p>2017-05-12 12:59:59 +0900</p>
    <p>5</p>
    <p id="item_1">1</p>
    <p id="item_2">2</p>
    <p id="item_3">3</p>
    <p id="item_4">4</p>
    <p id="item_5">5</p>
    <p id="item_6">6</p>
    <p id="item_7">7</p>
    <p id="item_8">8</p>
    <p id="item_9">9</p>
    <p id="item_10">10</p>
    <!-- divの色々な書き方 -->
    <div class="myClass" id="main"></div>
    <div class="myClass" id="main"></div>
    <div class="myClass" id="main"></div>
    <div class="myClass" id="main"></div>
    <div id="main">
      <div class="subMenu"></div>
    </div>
    <!-- %を付けると開始・終了タグが付く -->
    <p>
      hello
    </p>
    <p>hello(字下げされない)</p>
    <ul>
      <li>
        item
      </li>
      <!-- 小要素の改行を無視する「<」 -->
      <li>item</li>
    </ul>
  </body>
  <!-- bodyの終わり(htmlにも反映される) -->
  <!--
    複数行
    複数行
    複数行
  -->
</html>