（翻译）Haml官网简明教程

最近看的E文文档较多，觉得阅读技术文档的能力有所上升，正好看到一片不算太长的Haml官网的入门教程，就拿来翻译了一下，没用google，前后弄了40分钟左右  - -，还需要努力啊。。。

正文：

开始这部分教程之前，需要说明一件事。当你看完本教程，请把你的一个ERB文件用Haml写出来，尝试一下，写不好删除了也无所谓。如果你不喜欢你写的haml文件，那就没必要去保存，但是只要你看完了这个教程，务必尝试转换一个erb文档到haml。

开始入门

首先，获取Haml并且安装Gem（本教程假设你用的是ruby on rails, 在其它的一些框架Haml也是同样的用法），Haml是用来替代ERB的，这就意味着你的app/views文件夹下面的所有文件的后缀名都应该改成haml的文件名。

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

如何去转换

让我们开始转换一些基本的ERB样式

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

%strong= item.title    #Haml

在Haml中，我们用百分号“%”去写一个标签，百分号紧接着就是标签的名称。%strong,%div,%body,%html等任何你想用的标签。然后紧接着标签的是“=”符号，这个符号告诉Haml正确的解释Ruby代码并且输出返回值作为这个标签的内容。不像ERB，Haml会自动检测返回值并且正确的格式化标签。

增加标签属性

简单的标签看起来没有问题，但是如果为标签加上属性呢？

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

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

这些属性其实就是标准的Ruby hash表，class的属性是code，id的属性是message。注意到在这个例子中我们没有用等号 =  ，所以，Hello World被解释成正常的字符，而不是ruby代码。

有这么一个简单的方法去定义Haml中的标签，由于class和id是css中比较相同的属性并且被大多数设计人员和开发人员所熟悉的，我们可以用简单的符号去描述这个标签

%strong.code#message Hello, World!     #Haml

而且不止这些，div这个标签使用的太普遍了，，所以你可以只写tag的属性，让它默认为 %div，如下

.content Hello, World!     #Haml

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

使用进阶

现在来点比较复杂的怎么样？

ERB代码：

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

相当基础，这可能是局部代码的一部分或是什么东东，把它转换到Haml吧

Haml

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

干的很不错，现在把下面白框里面的ERB代码转换成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的精彩的小技巧，能让开发网站变得更加有趣。