Zen Coding: 一种快速编写HTML/CSS代码的方法(2)

这里是一个支持的属性和操作符的列表：

• E
  元素名称(p, p);
• E#id
  使用id的元素(p#content, p#intro, span#error);
• E.class
  使用类的元素(p.header, p.error.critial). 你也可以联合使用class和idID: p#content.column.width;
• E>N
  子代元素(p>p, p#footer>p>span);
• E+N
  兄弟元素(h1+p, p#header+p#content+p#footer);
• E*N
  元素倍增(ul#nav>li*5>a);
• E$*N
  条目编号 (ul#nav>li.item-$*5);

正如你能看到的，你已经知道如何使用Zen Coding了：只是些一个简单的仿CSS选择器(呃，“缩写”抱歉)，就像这样…

p#header>img.logo+ul#nav>li*4>a

…然后调用”展开缩写”行为。

这里有两个新增的操作符：元素倍增和条目编号。比如，如果你想生成5个<li>元素，你可以简单的写位li*5。它也将同样重写全部子代元素。如果你想写4个<li>元素，每个里面都有一个<a>标签，你就可以简单的写为li*4>a，这样会生成以下HTML代码：

1
2
3
4

<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

最后一个——条目编号用于当你想用索引标记重复的元素的情况。假设你想生成class为item1、item2和item3的3个<p>元素。你可以写成这样的缩写，p.item$*3:

1
2
3

<p class="item1"></p>
<p class="item2"></p>
<p class="item3"></p>

只需在你想要索引出现的任何class或id属性上添加一个美元符号即可，而且想要多少都可以。那么，这样…

 p#i$-test.class$*5

会被转换成为:

1
2
3
4
5

<p id="i1-test" class="class111"></p>
<p id="i2-test" class="class222"></p>
<p id="i3-test" class="class333"></p>
<p id="i4-test" class="class444"></p>
<p id="i5-test" class="class555"></p>

你会看到，当你写a的缩写的时候，输出是<a href=”"></a>。或者，如果你写img，输出就是<img src=”" alt=”" />。

Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的？有一个专门的文件，名为zen_settings.js描述了输出元素。这是一个简单的JSON文件，描述每种语言的缩写(是的，你可以为不同的句法定义缩写，比如HTML、XSL、CSS等)。通用的语言缩写定义看起来就像这样：

1
2
3
4
5
6
7

'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->',
			...
			},
			  'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',
			...
			}
			}

元素类型

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

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