关于HAML和HTML
下面是一个html的范例:
<div id="profile">
<div class="left column">
<div id="date"><%= print_date %></div>
</div>
<div class="right column">
<div id="email"><%= current_user.email %></div>
<div id="bio"><%= h current_user.bio %></div>
</div>
</div>
你可以看见,这只是标准的HTML/ERb的代码片断。对于你来说,这可能不会那么刺激审美神经。然而,正如Grigsby在他的文章中巧妙地解释到的,不仅仅里面会存在许多重复,而且也会出现很多不必要的字符。Hampton认为,标识语言应该是赏心悦目的,而且不是所有能赏心悦目的东西都很好,他认为能优雅到让你开发速度更快,这才是最好的。因此,从这点出发,输出同样结果的代码片段子Haml看起来应该是这样的:
#profile
.left.column
#date= print_date
#address= current_user.address
.right.column
#email= current_user.email
#bio= h(current_user.bio)
这看起来可能会有点奇怪,不过你不得不承认的是,这代码瘦下来好多。值得注意的是,代码中大量使用了空格来消除HTML的闭合标签,并使用CSS风格的语法来描述div的id和class,而且消除了难看的<%= %>
标签。如果你比较一下两个版本字符数的大小,你会发现范例中Haml版本的字符数是HTML版本的64%。这就意味着你可以少输入36%的字符、少读36%的字符。归根到底就是少了36%的碍眼的东西。Antoine de Saint-Exupery对Haml给于了高度评价:“在没有什么可以去除,而不是什么都加不进去的时候,十全十美的目标就达到了。”
关于EMMET和HTML
Emmet是一个编辑器插件,官方网站提供多编辑器支持。我一般使用vim,下面就以vim插件举例。
首先,按照vim插件文档进行安装。然后,新建一个文本文件,键入
html:5
按一下"<Ctr+y>,"(先按ctrl键+y键,然后再按逗号键,不同的编辑器有不同的转化键),这一行就立刻变成下面的样子。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
这就是Emmet的基本用法:先写简写形式,然后用"<Ctrl+y>,"将其转成HTML代码。
Emmet支持的简写规则,类似于CSS选择器(大写的E代表一个HTML标签):
1. E 代表HTML标签。
2. E#id 代表id属性。
3. E.class 代表class属性。
4. E[attr=foo] 代表某一个特定属性。
5. E{foo} 代表标签包含的内容是foo。
6. E>N 代表N是E的子元素。
7. E+N 代表N是E的同级元素。
8. E^N 代表N是E的上级元素。
请看下面的例子。
p p#main.item a[href=http://wikipedia.org]{维基百科} div>p div+p p>span^div
对应的HTML代码为:
<p></p> <p id="main" class="item"></p> <a href="http://wikipedia.org">维基百科</a> <div> <p></p> </div> <div></div> <p></p> <p><span></span></p> <div></div>
本文参考:
http://www.bianceng.cn/web/Html/201411/46562.htm
http://www.infoq.com/cn/news/2007/05/haml-beauty-of-efficiency/