haml

创建: 2019/05/23

文档: http://haml.info/docs/yardoc/file.REFERENCE.html

 安装

 安装

 

gem "haml"

 

  
 纯文本
 

 所有不带固有符号的都作为纯文本

  html也作为纯文本 
 转义字符

 直接输出后面的

%title
  = @title
  \= @title

 输出为 

<title>
  MyPage
  = @title
</title>

 

 

  
  
  
 html标签 
 标签名以 % 开始

 

%table#data
  %tbody
    %tr
      %td= '@data'

 相当于

<table class="data">
  <tbody>
    <tr>
      <td>数据</td>
    </tr>
  </tbody>
</table>

 

 属性 {} 或 () 

 ●  {} 直接作为ruby的hash, 故可用所有ruby语法

  - 也可以使用返回hash的方法(多个方法的话从左到右被 merge )

def html_attrs(lang = 'en-US')
  {:xmlns => "http://www.w3.org/1999/xhtml", 'xml:lang' => lang, :lang => lang}
end

# haml
%html{html_attrs('fr-fr')} 

 

  - 前缀

 嵌套进hash里

{data: {sample: 1, test: 2}}
# => data-sample="1" data-test="2"

 

 ●  () 内部插值:  #{} 

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

 

 

 class, id

 若传入数组, 则先删除false的元素, 再 flatten 

 ● class(简化方法为.)

 若为数组, 先flatten再 join " " 

 ● id(简化方法为#)

 若为数组, 先flatten再 join "_" 

 

 例

%div{id: %w(a b c), class: %w(a b c)} 123

解释为

<div class="a b c" id="a_b_c">
  123
</div>

 

 

 默认元素

 如果只指定class/id, 则为div

.sample a

 相当于 

%div.sample a

 相当于

<div class="sample">
    a
</div>

 

 

 关闭不带内容的标签

   /  

%br/

 

 

 Whitespace Removal: > and < 
 Object Reference: [] 
  
  
 doctype:!!!
  
 注释 
 / 多行注释靠缩进
 -# 多行注释靠缩进 
  
 插入ruby
 插入ruby =

   =  , 输出结果, 相当于

<%= ... %>

 例: 

= link_to 'sample', root_path

 ● 多行

 每一行都以  ,  来结束

 

 -

   -  , 不输出结果, 相当于

<% ... %>

 

 

 代码块

 ruby代码块不需要end

- (1..100).each do |i|
  %span= "a: #{i}"
  %span= "b: #{i}"
  %br/

 

 Whitespace Preservation: ~ 
 插值 #{} 

 除了文字里, 也可以放在纯文本里

- (1..100).each do |i|
  %span a: #{i}
  %span b: #{i}
  %br/

 

 Gotchas 
 Escaping HTML: &= 
 Unescaping HTML: != 
 Filters 

转载于:https://www.cnblogs.com/lancgg/p/10909900.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值