haml 是一种简洁优美的模板语言，主要智能用来替代基于ruby框架的模版系统，例如：替换Ruby on Rails的erb模版，可以大大缩减模板代码，减少冗余，提高可读性。并且Haml是一种完备的模板语言，没有牺牲当前模板语言的任何特性。Haml由Hampton Catlin发明并且开发了Ruby on Rails上的实现。

一、概述

1.常见语法规则

序号

haml

html

----

------

------

1.

!!!5

2.

%tag

代表HTML标签

3.

%tag#id

代表id属性

4.

%tag.class

代表class属性

5.

%tag(attr="xxx")

代表某一个特定属性

6.

%tag xxx

代表插入标签的内容

7.

%E %N

代表N是E的子元素。N如果写在第二行，需要缩进‘二格’

8.

|

haml标签，多行连接符

9.

-#

haml注释

10.

/

haml标签，前面加单行或多行注释，后面加关闭标签

tag,E可以替换为html标签

,,

,
• ,,

  Hello World

  维基百科

  二、语法 (on rails)

  1.% 百分号符号是一行的开始，紧接着一个元素的名字，它会创建一个这样的形式：, 默认的元素是div;

  %strong test to HTML：test

  strong= item.title to ERB：<%= item.title %>

  2.# 代替 id

  #id= item.title to ERB:

  <%= item.title %>

  3."." 代替 class

  %strong.code#message Hello, World! to ERB:

  Hello, World!

  3,4,5标题中"" 是为了方便读者看清，语句实际使用中并不需要;

  4.**"="** 代替 **<%= %>** 相当于插入ruby代码,并输出结果;

  .my-class= item.title to ERB:

  <%= item.title %>

  %p= Time.now to HTML:

  Sat Aug 06 15:06:09 +0100 2011

  5."-" 代替 <% %>相当于执行ruby代码,但不输出结果;

  - if @opportunities.any?

  = render @opportunities

  - else

  = render "shared/empty"

  to ERB:

  <%if @opportunities.any? %>

  <%= render @opportunities %>

  <%else%>

  <%= render "shared/empty" %>

  <%end%>

  6.**#{}** 表示插入ruby代码,并计算结果;

  %script(type="text/javascript" src="javascripts/script_#{2 + 7}") to HTML:

  常见的a标签和span标签:

  %a(title=@title){:href => @link.href} Stuff

  %span(class="widget_#{@widget.number}")

  7.**{}** 添加的ruby hash 属性或 html 复杂代码,hash属性和值之间用 **{:属性1=> 值1,:属性2=> 值2 }**表示;

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

  Hello, World!

  8.**img**标签hash

  %img{ :src => "/path/to/image", :alt => "Description of image" } or

  %img ( src="/path/to/image", alt="Description of image")

  to HTML：

  

  9.HTML5 DOCTYPE

  !!!5 to HTML:

  %meta{ :charset => "utf-8" } to HTML:

  %link{ :rel => "stylesheet", :href => "/css/master.css" } to HTML:

  %script{ :src => "/js/site.js" } to HTML:

  10.注释语句

  / 表示注释,分为行注释和块注释;

  / A forward slash at the start of a line wraps that line in a comment

  %blockquote

  %p Roads? Where we're going we don't need roads

  /

  A forward slash at the start of a nested block wraps the whole block in a comment

  %blockquote

  %p Roads? Where we're going we don't need roads

  Roads? Where we're going we don't need roads

  - **/[ ]**表示条件注释;

  /[if IE] %link { :rel => "stylesheet", :href => "/css/ie.css" } to HTML:

  -#表示haml自带注释;

  %p The line below won't appear in the HTML

  -# The rest of this line is a comment

  %p The line above won't appear in the HTML, nor will the lines underneath

  -#

  None of this nested text will appear

  in our rendered output either

  The line below won't appear in the HTML

  The line above won't appear in the HTML, nor will the lines underneath

  三、安装 Installing Haml

  gem install haml or

  Gemfile中添加:

  gem 'haml'

  gem "haml-rails"

  安装后可以运行halm使用命令行：

  haml input.html.haml output.html

  ### 参考

  1、HTML代码简写法：Emmet和Haml；

  2、An Introduction to Haml