Haml 语法学习笔记

Haml 是啥？

Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document, without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ERB, and ASP. However, Haml avoids the need for explicitly coding HTML into the template, because it is actually an abstract description of the HTML, with some code to generate dynamic content.

我所用到的 Haml 是在 Ruby on Rails 项目中，哎，这破玩意真是个坑啊~~尤其Rails，逻辑关系混乱的可以，学语言和框架从来没这么费劲过。

1. Plain Text

Escaping: \\

转义字符

The backslash character escapes the first character of a line, allowing use of otherwise interpreted characters as plain text. For example:

%title
  = @title
  \= @title

is compiled to:

<title>
  MyPage
  = @title
</title>

2. HTML Elements

Object Reference: []

使用 Ruby 对象设置 id 和 class。

Square brackets follow a tag definition and contain a Ruby object that is used to set the class and id of that tag.

HTML-style Attributes: ()
%a(title=@title href=href) Stuff

is the same as

%a{:title => @title, :href => href} Stuff

is the same as

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

On Ruby 1.9, Haml support:

%a{title: @title, href: href} Stuff

注意观察以上写法区别。

Whitespace Removal: > and <

> 是去除标签外面的空格，< 是去除标签里边的空格

> faces out of the tag and eats the whitespace on the outside, and < faces into the tag and eats the whitespace on the inside.

%blockquote<
  %div
    Foo!

is compiled to:

 <blockquote><div>
   Foo!
 </div></blockquote>
Doctype: !!!

描述 HTML 文档

3. Comments 注释

HTML Comments: /

单行：

%peanutbutterjelly
  / This is the peanutbutterjelly element
  I like sandwiches!

is compiled to:

<peanutbutterjelly>
  <!-- This is the peanutbutterjelly element -->
  I like sandwiches!
</peanutbutterjelly>

多行：

/
  %p This doesn't render...
  %div
    %h1 Because it's commented out!

is compiled to:

 <!--
  <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

is compiled to:

\<!--[if IE]>
  <a href='http://www.mozilla.com/en-US/firefox/'>
    <h1>Get Firefox</h1>
  </a>
<![endif]-->
Haml Comments: -#

For example:

%p foo
-# This is a comment
%p bar

is compiled to:

 <p>foo</p>
 <p>bar</p>

多行

%p foo
-#
  This won't be displayed
    Nor will this
                   Nor will this.
%p bar

is compiled to:

 <p>foo</p>
 <p>bar</p>

4. Ruby Evaluation

Inserting Ruby: =

执行ruby代码并返回结果显示在document中

%p
  = ['hi', 'there', 'reader!'].join " "
  = "yo"

is compiled to:

 <p>
    hi there reader!
    yo
 </p>

ruby代码可以写多行，换行的以后以逗号 , 结尾：

= link_to_remote "Add to cart",
    :url => { :action => "add", :id => product.id },
    :update => { :success => "cart", :failure => "error" }
Running Ruby: -

运行ruby代码，但是不会向document中写入任何内容。
但是：

It is not recommended that you use this widely; almost all processing code and logic should be restricted to Controllers, Helpers, or partials.

For example:

- foo = "hello"
- foo << " there"
- foo << " you!"
%p= foo

is compiled to:

 <p>
    hello there you!
 </p>
Ruby Blocks

ruby 块不是被有封闭的标签关起来，而是使用缩进来控制：

- (42...47).each do |i|
  %p= i
%p See, I can count!

is compiled to:

 <p>42</p>
 <p>43</p>
 <p>44</p>
 <p>45</p>
 <p>46</p>
 <p>See, I can count!</p>

Another example:

%p
  - case 2
  - when 1
    = "1!"
  - when 2
    = "2?"
  - when 3
    = "3."

is compiled to:

 <p>
   2?
 </p>
Ruby Interpolation: #{}

ruby代码中插入text

%p This is #{h quality} cake!

is the same as

%p= "This is #{h quality} cake!"

and might compile to:

 <p>This is scrumptious cake!</p>
Escaping HTML: &=

&= 或 &== 类似 =，执行ruby代码并将结果插入document，但是也有区别：

but sanitizes any HTML-sensitive characters in the result of the code.

&= "I like cheese & crackers"

compiles to

I like cheese & crackers

If the :escape_html option is set, &= behaves identically to =.

& can also be used on its own so that #{} interpolation is escaped. For example,

& I like #{"cheese & crackers"}

compiles to:

I like cheese & crackers
Unescaping HTML: !=

An exclamation mark followed by one or two equals characters evaluates Ruby code just like the equals would, but never sanitizes the HTML.

By default, the single equals doesn’t sanitize HTML either. However, if the :escape_html option is set, = will sanitize the HTML, but != still won’t. For example, if :escape_html is set:

= "I feel <strong>!"
!= "I feel <strong>!"

compiles to

I feel <strong>!
I feel <strong>!

! can also be used on its own so that #{} interpolation is unescaped. For example,

! I feel #{"<strong>"}!

compiles to

I feel <strong>!

5. Filters

Filters运行你定义一个text块，块内使用filter的规则，将结果显示在Haml中。
例如 :markdown

%p
  :markdown
    # Greetings

    Hello, *World*

is compiled to:

 <p>
   <h1>Greetings</h1>

   <p>Hello, <em>World</em></p>
 </p>

Filters 允许使用 #{} 插入 Ruby 代码。

- flavor = "raspberry"
#content
  :textile
    I *really* prefer _#{flavor}_ jam.

is compiled to

 <div id='content'>
   <p>I <strong>really</strong> prefer <em>raspberry</em> jam.</p>
 </div>

过滤器除了 :Markdown，:texttile外，还有 :cdata，:coffee，:css，:erb，:escaped，:javascript，:less，:maruku，:plain，:preserve，:ruby，:sass，:scss，你还可以自定义Filters看这里了 Haml::Filters

参考官网

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容