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

[Mackinac]

支持的属性和操作符的列表：
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);


如：div#content>h1+p

<div id="content">  
<h1></h1>  
<p></p>  
</div>

生成5个<li>元素，你可以简单的写位li*5

如果你想写4个<li>元素，每个里面都有一个<a>标签，你就可以简单的写为li*4>a

<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>