使用Haml制作更干净,更简洁的HTML

在诞生之前萨斯和CoffeeScript一样,Haml将Rails场景作为替代ERB / RHTML的标记模板。以下租户通过流星的Ruby框架传播,Haml(HTML一个BstractionArkupAnguage)以最简单的形式表现为HTML预处理器 - 相信标记应该美观,清晰,缩进,并且不会重复。

虽然它的CSS和JavaScript编译对应物已经普及,但预处理器运动促进了工具的创建,这些工具也降低了Haml入口栏。我们将很快探讨,现在可以完全避免命令行和Ruby安装。

Haml的核心是简洁且严格缩进的HTML,因此本教程假定您非常熟悉HTML。正如您所料,如果您计划在Rails / Sinatra /类似中动态使用它,那么Ruby基础知识和该框架的知识将是必要的。

最终,欣赏Haml的最简单方法是看到它:

! 5%html {lang:'en'}%head%title示例Haml%body%h1始祖鸟

此代码段将编译为:

样品Haml 

始祖鸟

一个简短的历史

由汉普顿卡特林(现在更像Sass的同义词)提供,Haml于2006年首次亮相。有一段时间,Sass和Haml被包装在同一个宝石中;从那时起,Sass在Rails之外的使用越来越普遍,而Haml作为其中的一部分仍然受到欢迎“The Rails Way。”

该项目目前为3.1.4版本,由Nathan Weizenbaum维护。 Haml是麻省理工学院的许可证,其来源是可在GitHub上找到。

准备工作和突出显示

与其他预处理器(LESS,Sass,CoffeeScript等)一样,将Haml引入您的工作流程需要一些快速步骤。您将生成以.haml结尾的文件,但在浏览器呈现之前,HTML转换需要以下方法之一:

用Ruby

如果Ruby已安装在您的机器上(它预先安装在OS X上),可以通过命令行下载gem:

Gem Install Haml

成功安装gem后,您可以使用。将Haml文件转换为HTMLHAML命令,替换输入产量使用适当的文件名:

haml input.haml output.html

这是一种实验和熟悉语法的好方法,但它无法有效扩展。与Sass不同,Haml宝石不具备自动转换的手表功能。如果可能,最好使用以下技术之一。

随着Rails

使用Rails是实现的最佳情况。只需添加Haml-rails Gem到您的Gemfile并使用bundler(捆绑安装或简单捆绑)。框架生成的视图将切换为.html.haml扩展,并为您处理所有编译。

Sans Ruby

除了支持一些一致的预处理语言,CodeKitLiveReload在没有命令行的情况下便于设置,以便在保存时编译Haml文件(以及其他有用的功能)。如果你想避开Ruby或避开命令行,这是最好的途径。

突出

在跳入之前,请前往编辑支持页面,以确保您喜欢的文本编辑器中正确的语法突出显示。

基本标签和文档类型

HTML标记元素使用百分号(%),后跟标记名称(例如%h1)创建。

! 5%的html

编译为:

您可能已经注意到,没有Haml相当于结束标记 - 它们是为您添加的。此代码段还包含简单Doctype包含的简写,其中有更多可用文件

嵌套内容和标签

由于Haml没有关闭标签,因此通过严格的空格和缩进标准来控制嵌套。内容可以与标记包含在同一行中,也可以在以下行中缩进。嵌套标签必须在新行上缩进。

%h1 Gallimimus%h2白垩纪时期%h3%强发现于1963年

编译为:

似鸡龙属

白垩纪时期

发现于1963年

虽然您可以选择在同一行上包含内容或嵌套内容,但如果同时尝试两者,则会引发错误。使用的空格或制表符的数量必须一致,否则编译器也将返回错误。

- #返回错误:内容在同一行并嵌套在%h4内最大高度:%em 9m-#返回错误:不一致缩进%p与%span暴龙出现在同一时期

此段无法成功编译。

添加属性

可以通过Ruby散列(一组键值对,非常类似于关联数组)将属性添加到标记中,或者通常在附加到标记的括号内添加属性。

%a {href:'http://en.wikipedia.org/wiki/Spinosaurus',标题:'Spinosaurus'} Spinosaurus%a(href =“http://en.wikipedia.org/wiki/Spinosaurus”title = “棘龙”)棘龙

编译为:

   

ID,类和div

虽然可以如上所述添加id和class属性,但它们通常表示为附加到标记的CSS选择器。值得注意的是,如果没有明确定义HTML标记,Haml会插入一个

%section#content.container .stats.container

编译为:

过滤器

用前导冒号表示的过滤器允许嵌套在内部的内容在被添加到输出之前在Haml之外被过滤。例子包括:JavaScript的:降价,和:CDATA;例如,JavaScript过滤器包装嵌套内容

稍后我们将重新审视Markdown过滤器,因为它在克服Haml的主要缺点方面起到了重要作用。

添加Ruby

除了简单的HTML转换之外,Ruby很容易在模板中嵌入和输出 - 与Rails,Sinatra和动态数据配合使用时必需的功能。要计算的行以连字符( - )开头,而要输出的行以等号(=)开头。

如果您熟悉在ERB中嵌入Ruby或将PHP插入HTML中,那么它就是相同的概念 - 连字符和等号表示取代<%%>,<%=%>等构造,以及

-  Title ='剑龙'%h1 =标题

编译为:

剑龙

没有尽头

也可以通过这种方式添加循环和条件逻辑。与标记标记一样,不必关闭这些语句 - 缩进控制内容属于哪些内容。 Rails(和其他MVC框架)中的一般偏好是在标记模板中尽可能少地使用逻辑;如果感觉麻烦或难以编写,该段应该可能存在于您的应用程序的其他地方。

-  title ='Pterodactyl'-如果标题=='剑龙'%h2史上最伟大的恐龙 - 否则%h2一些随机恐龙

编译为:

一些随机恐龙

这有什么好处的?

既然您已经掌握了基本语法,那么让我们来看看为您的工作流添加另一个缩写的原因:

  • 生成HTML的重复和努力显着减少。这本身并不是一个很好的理由,因为打字通常不是我们的瓶颈;但是,在长时间使用Haml之后,你会注意到切换回来时的区别。
  • 一旦熟悉了语法,Haml文件(特别是大文件)往往比HTML等效文件更容易扫描 - 这是维护的一个重要考虑因素。
  • 严格的嵌套和缩进大大有助于确保所有贡献者的质量变化和补充。
  • 与Rails配合使用时,服务器端代码可以无缝集成。

嵌套缺点

Haml对嵌套和缩进的严格性会给那些不熟悉的人带来一些问题。幸运的是,很容易避免这些问题:

内容格式

格式化内容(特别是文本块上的内联标记)是Haml的主要弱点。由于多个标签不能在同一行上声明,因此您不得不:

  • 在嵌套在父级中的每个内联标记之前和之后包括手动换行符。
  • 添加标准的HTML开始和结束标记(这是有效的,实际上是推荐的)。
  • 确保降价已安装在您的服务器上/本地并使用:降价过滤以将Markdown风格的语法添加到内容块。
%p访问当地的%em博物馆或%em科学研究所%p访问当地博物馆科学研究所 :降价访问当地*博物馆*或*科学研究所*

编译为:

参观当地的博物馆科学研究所

参观当地的博物馆科学研究所

参观当地的博物馆科学研究所

输出争吵

如果生成的HTML不符合您的标准,那么运营商如<,>和|可用于更好地控制编译器输出的内容:

%h2 <%span删除标记中的空格%h2%span删除%span>空格大约%span标记%h2评估多行作为一个管道特征|

编译为:

删除标记中的空格

删除 标记 周围 空格

使用管道符号将多行评估为一行

丑陋

当Haml与Ruby框架配对时,您可能会注意到HTML源在生产模式下缺少缩进。其中有一些可能的选择:丑陋Control确定在编译后是否格式化输出。默认情况下,它在Rails中设置为true,用于极大地提高渲染性能,而不会影响用户看到的内容。

包起来

正如不止一次提到的,Haml非常适合将HTML转换为具有严格约定的良好标记 - 这有利于速度和协作动态。这是一个很短的工作来获取语法,并且在与Ruby框架配对时真的很有用。虽然Haml在内容格式方面有一些挂断,但我们有多种方法可以应对。这绝不是Haml所有可用内容的详尽列表 - 绝对可以看一下参考一旦你习惯了它,就可以获得更多的概念,比如评论,插值和自我关闭标签。

进一步阅读

  • 哈姆参考:官方文件。
  • Tinkerbin:jsFiddle类似的网络应用程序,让你试验Haml。
  • 试试Ruby:在浏览器中给Ruby一个镜头。
  • 添加Haml:我的网页设计未来'11演示文稿,带有实时转换示例。


翻译字数超限