Haml是一种用来描述任何XHTML web document的标记语言，它是干净，简单的。而且也不用内嵌代码。Haml的职能就是替代那些内嵌代码的page page templating systems，比如PHP,ERB(Rails的模板系统)，ASP。不过， haml避免了直接coding XHTML到模板，因为它实际上是一个xhtml的抽象描述，内部使用一些code来生成动态内容。

原文：http://blog.163.com/evan__zhang@yeah/blog/static/121032757201032151245530/
 
 
 
它有什么特点呢？
1.        空格标识层次嵌套关系
2.       良好的标签格式
3.       DRY（Don’t repeat yourself）
4.       遵循CSS标准
5.       集成了Ruby代码
6.       用.haml扩展名代替了rails模板（.rhtml）
 
Haml的使用
Haml的使用有两种方式：
作为Ruby on Rails的插件来使用。
作为一个独立的Ruby module来使用。
 
Rails 插件方式：
这是使用Haml最常用的方式。当然，安装Haml的方式，就是Rails里常用的插件安装方式了：
一旦安装好以后，你必须以.haml为扩展名来使用。
你在ERB模板里可以使用的实例变量在Haml里照样可以使用，Helper方法也不例外。比如：
# file: app/controllers/movies_controller.rb
 class MoviesController < ApplicationController
    def index
      @title = "Teen Wolf"
    end
  end
# file: app/views/movies/index.haml
  #content
   .title
     %h1= @title
     = link_to 'Home', home_url
 
上面的haml代码会被编译为：
<div id='content'>
   <div class='title'>
      <h1>Teen Wolf</h1>
      <a href='/'>Home</a>
    </div>
  </div>
 
Ruby Module方式：
Haml可以完全从rails和ActionView里拿出来单独使用。下下面这样做：
  gem  install  haml
 
然后用Haml::Engine：
engine = Haml::Engine.new("%p Haml code!")
engine.render #=> "<p>Haml code!</p>\n"
 
XTML Tags：
下面这些字符会渲染出相应的xhtml tag
 
%
百分号符号是一行的开始，紧接着一个元素的名字，然后后面跟一个可选的修饰语（见下例），比如一个空格，或一行文本等，就会被渲染到这个元素里成为其内容。它会创建一个这样的形式：<element></element>.。举个例子：
  %one
    %two
      %three Hey there
会被编译为：
  <one>
    <two>
      <three>Hey there</three>
    </two>
  </one>
对于任何一个有效的标准元素字符，Haml都会自动的为其生成闭合标签。
 
{}
括号内的Ruby hash是用来指名一个元素的属性。它作为一个ruby hash的字面量，局部变量也可以在其中使用。Hash放在被定义好的标签之后，基本上就和Ruby语法一样，看例子：
 
  %head{ :name => "doc_head" }
    %script{ 'type' => "text/" + "javascript",
             :src   => "javascripts/script_#{2 + 7}" }
编译后为：
  <head name="doc_head">
    <script src='javascripts/script_9' type='text/javascript'>
    </script>
  </head>
 
 
[]
方括号跟在一个标签定义之后，包含一个Ruby 对象，被用来为这个标签设置class和id属性。这个class的值被设置为这个对象的类名（两个单词用下划线形式表示，而不是驼峰表示方法）并且id的值被设置为对象的类名加上这个对象的id，也是下划线连接。因为一个对象的id通常是朦胧的实现细节，这是表现model的实例最有用的元素了（这句是不是翻译的太差？）。看例子：
# file: app/controllers/users_controller.rb
  def show
    @user = CrazyUser.find(15)
  end
 # file: app/views/users/show.haml
  %div[@user]
    %bar[290]/
    Hello!
转换为：
  <div class="crazy_user" id="crazy_user_15">
    <bar class="fixnum" id="fixnum_581" />
    Hello!
  </div>
这是基于RailsConf Europe 2006 大会上DHH提出的SimpleHelpful语法
 
/
这个斜线字符，放在一个tag定义之后，可以让这个标签自我关闭。例子：
  %br/
  %meta{'http-equiv' => 'Content-Type', :content => 'text/html'}/
转换为：
  <br />
  <meta http-equiv='Content-Type' content='text/html' />
有一些标签（meta, img, link, script, br, and hr tags等）当没有内容的时候会自动关闭。看例子：
  %br
  %meta{'http-equiv' => 'Content-Type', :content => 'text/html'}
转换为：
  <br />
  <meta http-equiv='Content-Type' content='text/html' />
 
. and #
这两个符号是从CSS里借鉴来的。他们被用来表示一个元素的class和id属性。
看例子：
 
  %div#things
    %span#rice Chicken Fried
    %p.beans{ :food => 'true' } The magical fruit
    %h1.class.otherclass#id La La La
转换为：
 
  <div id='things'>
    <span id='rice'>Chicken Fried</span>
    <p class='beans' food='true'>The magical fruit</p>
    <h1 class='class otherclass' id='id'>La La La</h1>
  </div>
注意h1标签。两个点连用，第一个表示class属性，第二个则是用来链接那两个字符的空格。
 
  #content
    .articles
      .article.title
        Doogie Howser Comes Out
      .article.date
        2006-11-05
      .article.entry
        Neil Patrick Harris would like to dispel any rumors that he is straight
转换为：
  <div id="content">
    <div class="articles">
      <div class="article title">Doogie Howser Comes Out</div>
      <div class="article date">2006-11-05</div>
      <div class="article entry">
        Neil Patrick Harris would like to dispel any rumors that he is straight
      </div>
    </div>
  </div>
 
Implicit Div Elements（隐藏DIV）
因为Div这个标签经常被用，所以你仅用.and#这两个符号来定义class和id的时候，一个div元素就会被自动的使用。例如：
  #collection
    .item
      .description What a cool item!
和下面的这个相似：
  %div{:id => collection}
    %div{:class => 'item'}
      %div{:class => 'description'} What a cool item!
都会被转换为：
  <div id='collection'>
    <div class='item'>
      <div class='description'>What a cool item!</div>
    </div>
  </div>
=
等号符号用来插入ruby 代码的值到模板中。
 
  %p= "hello"
和下面的这种形式不太一样：
 
  %p
    = "hello"
 
XHTML Helpers
No Special Character
 
如果没有这些特定的字符打头的话，返回的只是一个普通的文本，比如下面的Wow this is cool!
  %gee
    %whiz
      Wow this is cool!
转换为：
  <gee>
    <whiz>
      Wow this is cool!
    </whiz>
  </gee>
 
!!!
当用haml来表示一个XHTML文档，你可以通过!!!这个符号来自动生成文档类型和XML prolog。比如：
  !!! XML
  !!!
  %html
    %head
      %title Myspace
    %body
      %h1 I am the international space station
      %p Sign my guestbook
转换为：
  <?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">
  <html>
    <head>
      <title>Myspace</title>
    </head>
    <body>
      <h1>I am the international space station</h1>
      <p>Sign my guestbook</p>
    </body>
  </html>
你也可以在！！！后面加版本号。比如：
  !!! 1.1
转换为：
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
and
 
  !!! Strict
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
如果你不想用UTF-8的编码，你也可以指定你想要的编码：
  !!! XML iso-8859-1
转换为：
  <?xml version="1.0" encoding="iso-8859-1" ?>
 
/
如果这个斜线写在打头的位置，则会注释这行。
  %billabong
    / This is the billabong element
    I like billabongs!
转换为：
  <billabong>
    <!-- This is the billabong element -->
    I like billabongs!
  </billabong>
 
放在代码的上方，则注释整个代码：
  /
    %p This doesn't render...
    %div
      %h1 Because it's commented out!
转换为：
 
  <!--
    <p>This doesn't render...</p>
    <div>
      <h1>Because it's commented out!</h1>
    </div>
  -->
 
  /[if IE]
    %a{ :href => 'http://www.mozilla.com/en-US/firefox/' }
      %h1 Get Firefox
转换为：
 
  <!--[if IE]>
    <a href='http://www.mozilla.com/en-US/firefox/'>
      <h1>Get Firefox</h1>
    </a>
  <![endif]-->
 
\
反斜杠符号允许字符串前面的第一个符号作为纯文本使用。
 
  %title
    = @title
    \- MySite
转换为：
 
  <title>
    MyPage
    - MySite
  </title>
 
|
管道符可以允许把输出为一行的内容写成多行。
 
  %whoo
    %hoo I think this might get |
      pretty long so I should |
      probably make it |
      multiline so it doesn't |
      look awful. |
    %p This is short.
is compiled to:
 
  <whoo>
    <hoo>
      I think this might get pretty long so I should probably make it multiline so it doesn't look awful.
    </hoo>
  </whoo>
 
:
冒号是指定一个过滤器。冒号后面是你要使用的那个过滤器的名字。For example,
 
  %p
    :markdown
      Textile
      =======
 
      Hello, *World*
转换为：
 
  <p>
    <h1>Textile</h1>
 
    <p>Hello, <em>World</em></p>
  </p>
 
Haml支持的过滤器定义
plain
ruby
preserve
erb
sass
redcloth
textile
markdown
 
 
Ruby evaluators（执行Ruby代码，前面说了）
=
等号允许执行ruby代码并返回一个值作为显示文本。
 
  %p
    = ['hi', 'there', 'reader!'].join " "
    = "yo"
编译为:
  <p>
    hi there reader!
    yo
  </p>
你也能使用双等号来更容易的嵌入ruby代码。比如：
  %p
    == 1 + 1 = #{1 + 1}
编译为：
  <p>
    1 + 1 = 2
  </p>
-
横杠符号，很有性格，可以使文本变为”silent script”：意思是，代码可以执行，但并不输出任何东西。
 
这里不推荐使用这种扩展，所有的逻辑代码都应该限制在controller，helper或partials里
 
For example:
 
  - foo = "hello"
  - foo << " there"
  - foo << " you!"
  %p= foo
转换为：
  <p>
    hello there you!
  </p>
Blocks
Ruby中的块，也不需要明显的去关闭，haml会让它自动关闭。这写都是基于缩进的。千万记住要缩进两个空格。
 
  - (42...47).each do |i|
    %p= i
  %p See, I can count!
编译为:
 
  <p>
    42
  </p>
  <p>
    43
  </p>
  <p>
    44
  </p>
  <p>
    45
  </p>
  <p>
    46
  </p>
Another example:
 
  %p
    - case 2
    - when 1
      = "1!"
    - when 2
      = "2?"
    - when 3
      = "3."
is compiled to:
 
  <p>
    2?
  </p>
< 
 
-#
相当于一个注释吧，跟在这个符号后面的文本无法输出。
 
For example:
 
%p foo -# This is a comment %p bar
 
is compiled to:
 
<p>foo</p> <p>bar</p>
 
h2>Other Useful Things
 
Helpers
Haml offers a bunch of helpers that are useful for doing stuff like preserving whitespace, creating nicely indented output for user-defined helpers, and other useful things. The helpers are all documented in the Haml::Helpers and Haml::Helpers::ActionViewExtensions modules.
Haml提供了很多有用的helper方法。比如为用户定义的helper方法保留空格创建漂亮的缩进等其他一些有用的东西。这些helpers方法都在Haml::Helpers和Haml::ActionViewExtensions这两个modules里。
 
 
Haml Options
Options can be set by setting the hash Haml::Template.options from environment.rb in Rails, or by passing an options hash to Haml::Engine. Available options are:
可以在Rails的environment.rb文件中通过设置Haml::Template.options的hash来设置Options，或者通过传一个hash到Haml::Engine里来设置。也就是你可以设置如下option来自定义haml，可用的options如下所示：
:suppress_eval
 
:attr_wrapper
:filename
:filters
 

:locals

 
度娘提供的参看资料：
http://wenku.baidu.com/link?url=KYU0KlMzYXEg2lTA1Nxj0l9jPqypIQL7BCniNkYI8i0d4UhJxH66BWMFcTkjM28wgyite3dEVoqEnnS_bVT178v3LkTTBBuUcijd6wQ2Vca

【转】Haml 这货是啥？ 附参考的更多相关文章

  1. Oracle笔试题库 附参考答案

    1．  下列不属于ORACLE的逻辑结构的是(C) 区 段 数据文件 表空间 2. 下面哪个用户不是ORACLE缺省安装后就存在的用户(A) A . SYSDBA B. SYSTEM C. SCOTT ...

  2. Windows 2003 服务器安全设置-批处理 (附参考链接)

    长期维护windows服务器终结出来的安全设置批处理与大家分享,复制以下全部内容用记事本另存为bat或者cmd执行 ===================分隔符号=================== ...

  3. ECSHOP自动收货解决方案 【附代码】

    ecshop系统,本身不带自动确认收货的,网上也找了一下,很多很复杂,且需要在服务器端设置定时任务,如果是虚拟主机,基本上就歇菜了. 某宝有一些卖自动收货的插件,不太了解其机制,不过也比较贵,要1-2 ...

  4. 芯灵思Sinlinx A64 linux 通过设备树写LED驱动（附参考代码，未测试）

    开发平台 芯灵思Sinlinx A64 内存: 1GB 存储: 4GB 详细参数 https://m.tb.cn/h.3wMaSKm 开发板交流群 641395230 全志A64设备树结构体 #inc ...

  5. 史上最全Java面试题整理（附参考答案）

    下列面试题都是在网上收集的,本人抱着学习的态度找了下参考答案,有不足的地方还请指正,更多精彩内容可以关注我的微信公众号:Java团长 1.面向对象的特征有哪些方面? 抽象:将同类对象的共同特征提取出来 ...

  6. HTML代码简写法：Emmet和Haml

    http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html?bsh_bid=657901854 HTML代码简写法:Emmet和Haml   ...

  7. 一个简单可参考的API网关架构设计

    网关一词较早出现在网络设备里面,比如两个相互独立的局域网段之间通过路由器或者桥接设备进行通信, 这中间的路由或者桥接设备我们称之为网关. 相应的 API 网关将各系统对外暴露的服务聚合起来,所有要调用 ...

  8. HTML代码简写法：Emmet和Haml（转）

    HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法----简写法. 常用的简写法,目前主要是Emmet和Haml ...

  9. 【转】C#语言之“string格式的日期时间字符串转为DateTime类型”的方法

    方法一:Convert.ToDateTime(string) string格式有要求,必须是yyyy-MM-dd hh:mm:ss ================================== ...

随机推荐

  1. 将Tomcat设置为windows自动启动的服务

    一般情况下Tomcat服务需要手动运行批命令启动服务.在windows操作系统下如果需要将Tomcat变成自动启动的服务,只需按以下步骤操作即可: 方法/步骤 将Tomcat设置成服务(假设我们缺省的 ...

  2. 课时48.表单标签-H5（了解）

    可以自动校验输入的内容是否符合邮箱的格式,我带大家随便看几个就行了,因为大部分浏览器对这几个特性有的支持,有的不支持,所以大家只要了解就好了   

  3. 纯 js 实现跨域接口调用 jsonp

    开发「bufpay.com 个人即时到账收款平台」的时候,支付页面需要 poll轮询 查询订单状态. bufpay 支付接口如下: 接口地址:https://bufpay.com/api/pay/ai ...

  4. PHP | 获取数组长度的方法

    一.获取一维数组的长度 count.sizeof 都可以直接统计一维数组长度. 例如:$arr = Array('0','1','2','3','4');       echo count($arr) ...

  5. [Doctrine Migrations] 数据库迁移组件的深入解析一：安装与使用

    场景分析 团队开发中,每个开发人员对于数据库都修改都必须手动记录,上线时需要人工整理,运维成本极高.而且在多个开发者之间数据结构同步也是很大的问题.Doctrine Migrations组件把数据库变 ...

  6. mongodb安装 超级管理 普通用户

    安装MongoDB #1.配置mongo的yum源sudo vi /etc/yum.repos.d/mongodb-org-3.4.repo [mongodb-org-3.4]name=MongoDB ...

  7. 带提示范围的猜数小游戏--python

    import random random_number = random.randint(1, 99) print(random_number) start_data = 1 end_data = 9 ...

  8. php html 静态化 缓存

    <?php // // ob_start(); $cache_name = md5(__FILE__). '.html'; $cache_lifetime = 3600; // echo fil ...

  9. Go复习

    # 代码包 #命名基础包 package “base” #导入基础包 import( "base1" ba "base2" 只导入当不使用情况下需要添加别名 . ...

  10. postgresql 数据库schema 复制

    ------ --- 导出 pg_dump -h *.*.*.* -p 5432 -d you_databasename -n you_schema -f you_sqlfile.sql ---- 替 ...