元素类型

Zen Coding有两个主要的元素类型：“片段(snippets)” 和 “缩写(abbreviations)”。片段就是随意的代码碎片，而缩写是标签定义。通过片段，你可以写出你想要的任何代码，它也会照你写的格式输出；但是你必须手动的格式化它(使用\n 和\t实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方，就像这样：cc:ie6>style。如果你不使用${child}变量，子元素将会输出于代码片段的后面。

有了缩写，您必须编写标记定义，而且语法是非常重要的。通常，你必须写一个简单的带有所有默认的属性的标签，比如: <a href=”"></a>。当Zen Coding被加载后，它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以，如果你写<img src=”" alt=”" />，你会告诉Zen Coding这个标签必须是空的，然后“扩展缩写”行为就会在输出之前为它使用特定的规则。

对于片段和缩写，你可以添加一个管道符号，它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的，Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。

例子

那么，这里解释一下当你写了一个缩写并召唤“展开缩写”行动时发生的事情。首先，它将一个完整的缩写分开为独立的元素：这样div>a 会被分成div 和a 元素，当然也会维持他们的关系。然后，每个元素，解析器先在代码片段内而后在缩写中寻找定义。如果它找不到，将会使用元素的名字作为新的标签，并为其添加缩写中定义的id和class。比如，如果你写mytag#example，解析器在片段或缩写中找不到mytag定义，它就会输出<mytag id=”example”><mytag>。

我们制作了很多 默认的CSS 和 HTML缩写和片段。你会发现学习使用Zen Coding可以增加你的生产力。

HTML 标签对匹配器

对于HTML编码者的另一个非常常见的任务是寻找一个元素的标签对。例如你想选择整个<div id=”content”>标签并将其移动到其它地方或者删除它。或者有可能你在寻找一个关闭标签并想知道它属于那个开始标签。

不幸的是，很多现代开发工具在该功能方面有所欠缺。那么我就决定写一个我自己的标签对匹配器作为Zen Coding的一部分。不过它依然在beta阶段并尚存一些问题，但它可以工作的很不错并很快。不是浏览整个文档(像通常的那种HTML标签对匹配器的做法)，它从光标的当前位置开始寻找相关的标签。这使得它非常快并且上下文无关：它甚至可以用于这段JavaScript代码片段：

var table = '<table>'; for (var i = 0; i < 3; i++) {
 table += '<tr>'; for (var j = 0; j < 5; j++) {
  table += '<td>' + j + '</td>';
 }
 table += '</tr>';
}
table += '</table>';

使用缩写包裹

这真的是一个很酷的特性，它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器bug？或者你需要添加一个装饰，比如一个背景图片或者边框到一个块级内容？你必须写开始标签，临时打断你的代码，找到相关的点然后关闭标签。这就是“使用缩写包裹”能帮助你的地方。

该功能相当简单：它要求你输入缩写，然后执行适当的“展开缩写”行动并将你期望的文本放到你缩写的最后一个元素里面。如果你没有选择任何文本，它就会启动标签对匹配器并使用结果。它同样能搞清楚你的光标的位置：标签的内容里面或者是开始和关闭标签中间。依赖于它的位置，它会包裹标签的内容或标签本身。

缩写包裹为包裹个别行引入了一个特定的缩写句法。简单跳转到倍增操作符后面的数字，比如：ul#nav>li*>a。当Zen Coding 发现一个使用未定义的倍增数的时候，它会将它作为一个重复元素：你的章节中有多少行，它就会输出多少次，并将每行的内容放到重复元素的最后一个子元素里面。

如果你在这段文本外面包裹这段缩写div#header>ul#navigation>li.item$*>a>span：

About Us
Products
News
Blog
Contact Up

你将会得到以下结果：

<div id="header">
 <ul id="navigation">
  <li class="item1"><a href=""><span>About Us</span></a></li>
  <li class="item2"><a href=""><span>Products</span></a></li>
  <li class="item3"><a href=""><span>News</span></a></li>
  <li class="item4"><a href=""><span>Blog</span></a></li>
  <li class="item5"><a href=""><span>Contact Up</span></a></li>
 </ul>
</div>

你可以看到，Zen Coding是一个强大的文本处理工具。

出处：前端观察
责任编辑：bluehearts

上一页 Zen Coding:快速编写HTML/CSS代码 [2] 下一页 Zen Coding:快速编写HTML/CSS代码 [4]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。