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

haml参考大全的更多相关文章

  1. 微信小程序错误码参考大全

    开发过程中,会遇到很多微信返回的状态码,鬼知道代表什么意思,现在好了,整理总结了一份状态码,方便大家. 转载:http://www.yiyongtong.com/archives/view-1856- ...

  2. JavaScript 对象与数组参考大全

    http://www.cnblogs.com/meil/archive/2006/06/28/437527.html本文列举了各种JavaScript对象与数组,同时包括对上述每一对象或数组所完成工作 ...

  3. Linux Shell编程参考大全

    本文记录Linux Shell编程中常用基本知识,方便快速入门以及查询使用. 本文主要分为以下几个部分: 一.Shell中的变量 任何编程语言中,有关变量的定义,作用范围,赋值等都是最最基础的知识. ...

  4. 豪情-CSS解构系列之-新浪页面解构-02

    前言 一.开发工具 - 前端四大利器 1. WebStorm 1). 岂今为止,业界公认的前端开发利器.优点: 2). 缺点 3). 相关资源 4). 后续展望 2. Photoshop 1).基本信 ...

  5. DB2 函数大全

    DB2函数大全 函数名 函数解释 函数举例 AVG() 返回一组数值的平均值. SELECTAVG(SALARY)FROMBSEMPMS; CORR(),CORRELATION() 返回一对数值的关系 ...

  6. DB2函数大全

    DB2函数大全 函数名 函数解释 函数举例 AVG() 返回一组数值的平均值. SELECTAVG(SALARY)FROMBSEMPMS; CORR(),CORRELATION() 返回一对数值的关系 ...

  7. VC++/MFC(VC6)开发技术精品学习资料下载汇总

    工欲善其事,必先利其器,VC开发MFC Windows程序,Visual C++或Visual Studio是必须的,恩,这里都给你总结好了,拿去吧:VC/MFC开发必备Visual C++.Visu ...

  8. C/C++编程语言学习资料尽收眼底 电子书+视频教程

    Visual C++(VC/MFC)学习电子书及开发工具下载请看这里 史无前例的网络最全最强C/C++资料索引: C/C++编程语言学习资料尽收眼底 电子书+视频教程 VC++/MFC(VC6)开发技 ...

  9. Python经典资料汇总

    [专题推荐]Python系列英文原版电子书 http://down.51cto.com/zt/104 python简明教程(CHM) http://down.51cto.com/data/49213 ...

随机推荐

  1. lua的table的删除操作

    直接使用table的remove方法 , , } table.remove(tab) --默认删除最后一个元素,第二个参数可以指定删除位置 删除后,后面的元素会往前移动.有点像C++的std::vec ...

  2. EBS _ALL, _TL, _VL, _V,_F,_VL,_A,_AVN and what else

    http://hi.baidu.com/einsteinalbert/item/54579250efc637abadc85705 _ALL, _TL, _VL, _V,_F,_VL,_A,_AVN a ...

  3. Source Multiplayer Networking【转】

    https://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking Multiplayer games based on th ...

  4. QuartzNet3.0实现作业调度

    Quartz是一个完全由JAVA编写的开源作业调度框架. Quartz.NET是Quartz的.NET移植,它用C#写成,可用于.Net以及.Net Core的应用中. 目前最新的quartz.net ...

  5. java web service wsdlLocation 不写死 可动态配置

    本解决方案用例Maven 如果项目没用Maven的客园参考扩展一下思路 寻找下适合解决自己项目的方式

  6. c# 合并重叠时间段的算法

    c# 合并重叠时间段的算法 一.采用非排序: 方案一: 使用递归算法,如不喜欢递归的伙伴们,可以使用whie代替. 1.文件:Extract_Chao.cs(核心) using System; usi ...

  7. 无废话网页重构系列——（3）Web重构前的分析

    本篇讲重构前的分析.从“工作状态.工作环境和工作角色”和具体重构工作两方面分析. 凡是经过考验的朋友,就应该把他们紧紧地团结在你的周围 比较理想的工作状态:制定了各种设计和开发规范,各团队之间邮件.团 ...

  8. 敏捷项目-依赖项拖动change

    1. 2.类方法插入数据.

  9. XCode - 无法对iPhone真机调试的解决方法！

    OSX:10.14 XCode:10.1 真机:iPhone 4S 错误很多啊,并非编译错误,编译已经成功了,但是无法安装到真机,我真不理解啊!!由于真的没有想到能够解决,有的错误没有截图,先看部分错 ...

  10. JQuery - Ajax和Tomcat跨域请求问题解决方法！

    在JQuery里面使用Ajax和Tomcat服务器之间进行数据交互,遇到了跨域请求问题,无法成功得到想要的数据! 错误信息部分截图: 通过错误信息判断知道已经发生在Ajax跨域请求问题了! 当前Tom ...