Haml 是什麼？

Haml（HTML Abstraction Markup Language)

HTML 抽象標記式語言是一種模板系統，它可以避免在 Web 文件中內嵌代碼，使 HTML 更簡易和乾淨

Haml 為 HTML 中提供了一些動態內容的靈活性。為執行 Haml 代碼，檔案需要採用 .haml 副檔名。這些檔案類似 .erb 檔案，這有助於在開發網路應用程式時嵌入 Ruby 代碼。在解析代碼注釋時，Haml 採用與 Ruby 1.9 或之後版本相同的規則

Haml 只能理解相容 ASCII 的編碼（例如UTF-8），而不能理解不相容ASCII的UTF-16與UTF-32

來個 Hello-World 例子

HTML:

1
<p class="sample" id="welcome" > Hello, World!!! </p>

Haml:

1
%p{:class => "sample", :id => "welcome"} Hello, World!!!

又可以變成：

1
%p.sample#welcome Hello, World!!!

類似 eRuby，Haml也可以存取局部變數（在同一個檔案中以Ruby代碼聲明）

  • file: app/controllers/messages_controller.rb

    1
    2
    3
    4
    5
    class MessagesController < ApplicationController
      def index
        @message = "Hello, World!!!"
      end
    end

  • file: app/views/messages/index.html.haml

    1
    2
    #welcome
      %p= @message

    將得到：

    • Haml 編譯成 HTML

      1
      2
      3
      <div id="welcome">
        <p> Hello, World!!!</p>
      </div>

      再來跟跟習慣的 eRuby(erb) 比較看看

    • Haml

      1
      2
      3
      4
      5
      6
      #content
        .left.column
          %h2 Welcome to our site!
          %p= print_information
        .right.column
          = render :partial => "sidebar"

    • ERB

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <div id='content'>
        <div class='left column'>
          <h2>Welcome to our site!</h2>
          <p><%= print_information %></p>
        </div>
        <div class="right column">
          <%= render :partial => "sidebar" %>
        </div>
      </div>

      讓專案執行 haml 檔案

    安裝 Haml gem：

    1
    gem 'haml', '~> 4.0', '>= 4.0.7'

    Rubygem.org

總結

其實如果有接觸過 pug / sass 這類的話，基本上再來看就會發現整體很熟悉，簡單的規則歸類以下：

  1. <h1></h1> 省略 結尾、 大於小於 變成 %h1
  2. class / id 將以 . / # 來代表
  3. <%= %> 將直接以 = 來代表
  4. <% %> 將直接以 - 來代表