HAML的语法（有点恶心）

发表于   |   分类于   |  


工作用到了HAML，这语法好处是在于他代码量少，坏处就是你看不出他是HTML了让人乍一看有些别扭，而且要严格遵循缩进格式~~

HAML==>HTML:

1
2
3
%one
	%two
		%three Hey there

等同于HTML的：

1
2
3
4
5
<one>
	<two>
		<three>Hey there</three>
	</two>
</one>

1
%html{'xmlns':'http://www.w3.org/1999/xhtml', 'xml:lang':'en', 'lang':'en'}

等同于HTML的：

1
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'></html>

1
%input{'type':'checkbox', value:'Test', checked: None}

等同于HTML的：

1
<input type="checkbox" value="Test" checked />

1
%div{'id': ('article', '3'), 'class': ('newest', 'urgent')} Content

等同于HTML的：

1
<div id='article_3' class='newest urgent'>Content</div>

1
2
3
4
%div#things
    %span#rice Chicken Fried
    %p.beans{'food':'true'} The magical fruit
    %h1#id.class.otherclass La La La

等同于HTML的：

1
2
3
4
5
<div id='things'>
    <span id='rice'>Chiken Fried</span>
    <p class='beans' food='true'>The magical fruit</p>
    <h1 id='id' class='class otherclass'>La La La</h1>
</div>

1
2
3
4
5
6
%div#content
    %div.articles
        %div.article.title Doogie Howser Comes Out
        %div.article.date 2006-11-05
        %div.article.entry
            Neil Patrick Harris would like to dispel any rumors that he is straight

等同于HTML的：

1
2
3
4
5
6
7
8
9
<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>

1
%div#Article.article.entry{'id':'1', 'class':'visible'} Booyaka

等同于HTML的：

1
<div id='Article_1' class='article entry visible'>Booyaka</div>

1
2
3
#collection
    .item
        .description What a cool item!

等同于HTML的：

1
2
3
4
5
<div id='collection'>
    <div class='item'>
        <div class='description'>What a cool item!</div>
    </div>
</div>

1
2
%br/
%meta{'http-equiv':'Content-Type', 'content':'text/html'}/

等同于HTML的：

1
2
<br />
<meta http-quiv='Content-Type' content='text/html' />

1
2
3
%peanutbutterjelly
    / This is the peanutbutterjelly element
    I like sandwiches!

等同于HTML的：

1
2
3
4
<peanutbutterjelly>
    <!-- This is the peanutbutterjelly element -->
    I like sandwiches!
</peanutbutterjelly>

1
2
3
%p foo
-# Some comment
%p bar

等同于HTML的：

1
2
<p>foo</p>
<p>bar</p>

1
2
/[if IE]
    %h1 Get a better browser

等同于HTML的：

1
2
3
<!--[if IE]>
    <h1>Get a better browser</h1>
<![endif]-->

django相关haml语法请参考相关资料

热评文章