引言
Haml 是一种简洁优美的模板语言，可以应用于Ruby on Rails、 PHP等Web开发平台，可以大大缩减模板代码，减少冗余，提高可读性。并且Haml是一种完备的模板语言，没有牺牲当前模板语言的任何特性。Haml由 Hampton Catlin发明并且开发了Ruby on Rails上的实现。本文将以Ruby on Rails中的Haml实现为例，帮助你了解Haml的基本语法和常用特性，让你领略到Haml带来的高效生产。
缩进嵌套
当嵌套结构变得复杂时，HTML代码一方面容易忘记添加结束标签，另一方面嵌套结构难以读懂。Haml中不需要结束标签，因为它借鉴了Python的语法，强制使用两个空白字符的缩进来表示代码的嵌套结构，既提高了代码的可读性，又避免了对结束标签的依赖。
%ul
%li Salt
%li Pepper
等价于
<ul>
<li>Salt</li>
<li>Pepper</li>
</ul>
自关闭标签用来关闭：
%br/
等价于：
<br />
Haml的缩进语法优点是：
1. Haml的强制缩进相当于从语言级别规定了代码的缩进规范，违反了这种规范的“灵活性”可以被看成是邪恶的£¬£¬没有缩进或者缩进乱七八糟的嵌套标签是这种灵活性的代价。Haml这种缩进的约束实际上让程序员从不同的缩进风格中解脱出来，关注更重要的事情。
2. 结束标签自标签语言诞生起就是一种冗余，IDE对于标签语言最常用的支持也就是结束标签的自动补全和嵌套标签的自动缩进。Haml致力于消除冗余。
HTML 属性
Haml用{}来设置HTML属性，{}中的内容被当作是Ruby Hash来解释，所以任何Ruby代码都可以被直接调用。例如：
%p{:class => cycle("odd", "even")} Hello
等价于
<p class = '<%= cycle("odd", "even")%>' > Hello </p>
重构重复代码时，往往要借助Helper方法。你也可以把一些HTML属性封装成Helper 方法，然后直接引用：
module ApplicationHelper
def image_src
{:src => 'hello.jpg'}
end
end
%img{image_src}/
被解释成：
<image src='hello.jpg' />
你也可以继续添加其他属性：
%img{image_src, :class => 'nice'}
CSS风格的id 和 class 属性
一个结构良好的HTML中，最常用的属性毫无疑问是 id 和 class。Haml借鉴了CSS的语法，简化了这两个属性的编写。基本的语法结构是：
%tagname#id.class
例如
%p#foo Hello
被解释成：
<p id='foo'> Hello </p>
如果你使用div标签，连tagname都可以省略。比如一个id属性为foo的div标签：
#foo Hello!
被解释成
<div id='foo'>Hello!</div>
同理
.nice Hello
被解释成
<div class='nice'> Hello </div>
也可以添加多个 class ：
#foo.nice.light
插入代码
相对于RHTML，Haml的代码插入方式简洁得多。对于需要直接输出的代码，
Haml用 = 来代替 <%= ...%> 。比如：
%p
1 + 2 =
= 1 + 2
被解释成：
<p>
1 + 2 = 3
<p>
对于非输出的代码，用 - 符号来插入。不同于一般Ruby代码的是，就像Haml处理HTML标签一样，Haml中的Ruby代码块不需要关闭。比如：
- (1..3).each do |i|
%p= i
被解释成：
<p>
1
</p>
<p>
2
</p>
声明文档类型
XHTML的声明方式以啰唆而著称：
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果你厌倦了每次Copy and Paste，可以尝试一下Haml的方式：
!!! XML
!!!
或者你喜欢 XHTML 1.1，就用：
!!! 1.1
来代替：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">结束语
<div class="iteye-blog-content-contain" style="font-size: 14px"></div>