Passion of life
  2. 前端

Haml是X HTML Abstraction Markup Language的缩写，用Ruby写成，可以将写成的模版转换为HTML代码。Haml的优点是简洁省去了HTML很多繁琐的标签。

安装Haml:

1
gem install haml

Haml语法

  • HTML5 DOCTYPE
    1
    !!! 5

HTML：

1
<!DOCTYPE html>
  • XHTML Strict DOCTYPE
    1
    !!! Strict

HTML:

1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • XML DOCTYPE
    1
    !!!XML

HTML:

1
<?xml version='1.0' encoding='utf-8' ?>
  • 标签
    %开头表示标签，如%html, %head, %body等。代码块的层级关系用缩进表示。
    1
    2
    3
    4
    5
    6
    !!!5
    %html
    	%head
    		%title Haml introduction
    	%body
    		give me five!

输出HTML为：

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>Haml introduction</title>
  </head>
  <body>
    give me five!
  </body>
</html>
  • ID
    在ID前加上#即可：
    1
    2
    %div#mine
    %p#yours

HTML:

1
2
<div id="mine"></div>
<p id="yours"></p>
  • Class
    在Class前加.：
    1
    2
    %div.mine
    %p.yours

HTML:

1
2
<div class="mine"></div>
<p class="yours"></p>

还可以添加多个Class:

1
%div.mine.yours

HTML:

1
<div class="mine yours"></div>

div是默认标签，如果只写ID或者Class，那么就默认是div标签：

1
#mine

HTML:

1
<div id='mine'></div>

ID和Class可以混用：

1
2
#mine.yours
#mine.yours.his

HTML:

1
2
<div class='yours' id='mine'></div>
<div class='yours his' id='mine'></div>
  • 属性

属性可以使用Ruby Hash语法表示：

1
2
%a{:href => 'http://hi.com'} hi
%input{:type => 'submit'}

HTML:

1
2
<a href='http://hi.com'>hi</a>
<input type='submit'>

或者可以写成：

1
2
%a(href='http://hi.com') hi
%input(type='submit')
  • 使用数组表示ID和Class:
    1
    2
    %p{:class => ['one','two']} hi
    %p{:id=> ['one','two']} hi

HTML:

1
2
<p class='one two'>hi</p>
<p id='one_two'>hi</p>
  • 注释

“/“起首的行表示HTML注释，”-#”起首的行表示Haml注释。还可以添加条件注释：

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

HTML:

1
<!--[if IE]> <link href="/css/ie.css" rel="stylesheet"> <![endif]-->

编译

1
haml input.haml output.html

更详细语法的请参考：
http://haml.info/docs/yardoc/file.REFERENCE.html

HAML Cheat Sheet