Emmet和Haml

发表于 更新于
本文字数： 826 阅读时长 ≈ 1 分钟

参与维护的项目用到了Haml。

Emmet一直都在

  • 最开始接触Emmet是在编辑器sublime中安装了插件，其前身叫做“ZenCoding”。
  • Emmet用和CSS选择器相似的语法来描述元素的嵌套层级关系和属性,实现HTML/XML/CSS等代码的智能自动补全。
  • 最开始，很容易在输入“div”后，用一个tab感受到它的强大和方便。进一步的，可能发现输入“div.className”之后还能自动生成如同<div class="className"></div>的html。

Emmet一般语法

Emmet的语法规则很丰富，我们得以快速编写代码。为了方便说明，下面都用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的上级元素。

对比Haml

什么是Haml

  1. 其实它是一个命令行工具。需要先安装Ruby语言，再安装Haml：gem install haml
  2. 不是方便编辑的，而是使用时，用命令行将.haml文件编译为html文件。harml input.haml output.html

Haml规则

简写语法

  1. !!! 5 代表 <!DOCTYPE html>
  2. %E 代表HTML标签。
  3. %E#id 代表id属性。
  4. %E.class 代表class属性。
  5. %E(attr="xxx") 代表某一个特定属性。
  6. %E XXX 代表插入标签的内容。
  7. %E %N 代表N是E的子元素。N如果写在第二行，需要缩进。

格式语法

  1. 代码块的层级关系用缩进表示
  2. /起首的行表示HTML注释，-#起首的行表示Haml注释（注意，有空格）