教程

在我们开始本教程之前，我想说明一点。看完本教程后，请尝试将您的一个 ERB 文件转换为 Haml。试一试。只需打开文件并开始删除内容。如果您不喜欢，可以删除文件，但完成本教程后，请尝试转换一个文件。

Haml 在最初的 20 分钟内可能感觉很奇怪，但之后您会发现 **速度更快**。

入门

首先，获取 Haml 并安装 gem（本教程假设您使用的是 Rails - 尽管它也适用于其他框架和独立的 Haml）。Haml 是 ERB 的直接替代品。这意味着您可以在 app/views 文件夹中将任何文件切换到 Haml，只需更改文件的扩展名即可。

app/views/account/login.html.erb → app/views/account/login.html.haml

现在，当您查看该页面时，ERB 将不再处理模板，而是由 Haml 处理。您可以在整个网站中混合使用 ERB 和 Haml，并根据需要进行切换。

如何转换

让我们从一些要转换的基本 ERB 代码开始。

ERB

<strong><%= item.title %></strong>

Haml

%strong= item.title

在 Haml 中，我们使用百分号和标签名称来编写标签。这适用于 %strong、%div、%body、%html；任何您想要的标签。然后，在标签名称之后是 =，它告诉 Haml 评估右侧的 Ruby 代码，并将返回值作为标签的内容输出。与上面的 ERB 不同，Haml 会自动检测返回值中的换行符，并正确格式化标签。

添加属性

简单的标签很好，但如何向标签添加属性呢？

HTML

<strong class="code" id="message">Hello, World!</strong>

Haml

%strong{:class => "code", :id => "message"} Hello, World!

属性只是一个标准的 Ruby 哈希。class 属性为 "code"，id 属性为 "message"。请注意，在本例中，我们没有使用 =，因此 "Hello, World!" 被解释为普通字符串，而不是 Ruby 代码。

在 Haml 中定义此标签有一种更简单的方法，因为 class 和 id 是非常常见的属性，而且大多数设计师（和开发人员）都熟悉 CSS，我们可以使用类似的表示法来描述此标签。

Haml

%strong.code#message Hello, World!

不仅如此，由于 div 标签非常常见，您可以省略标签定义，它将默认使用 %div。

Haml

.content Hello, World!

HTML

<div class='content'>Hello, World!</div>

提高复杂度

现在，让我们看看更复杂的情况。

ERB

<div class='item' id='item<%= item.id %>'>
  <%= item.body %>
</div>

非常基础。这可能是部分代码的一部分。让我们将其转换为 Haml。

Haml

.item{:id => "item#{item.id}"}= item.body

这些东西很有趣！现在，嵌套在 Haml 中通过空格来处理。

ERB

<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

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"

看看这个。这难道不会让你微笑吗？

还有很多东西要学，所以我强烈建议你查看一下参考文档。它充满了我们添加到 Haml 中的绝妙小技巧，让构建网站更加有趣。