如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：

Demo

• Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持)
• 中文版演示

下载(完全支持)

• Aptana (跨平台);
• Coda, via TEA for Coda (Mac);
• Espresso, via TEA for Espresso (Mac);

下载(部分支持，只支持“展开缩写”)

• TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
• TopStyle;
• Sublime Text;
• GEdit;
• Dreamweaver CS4
• editArea在线编辑器;
• Zen Coding在线编辑器中文版

现在让我们看一下这些工具是如何工作的吧。

展开缩写

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成 一些东西，是写一个长代码的较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。

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

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

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

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

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

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

<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个<div>元素。你可以写成这样的缩写，div.item$*3:

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

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

div#i$-test.class$$$*5

会被转换成为:

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

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

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

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

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

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

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