使用仿
层叠样式表选择器的语法来快速开发
HTML和CSS ——由Sergey Chikuyonok开发。
Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。
展开缩写
展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“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\u003eN子代元素(div\u003ep, div#footer\u003ep\u003espan);E+N兄弟元素(h1+p, div#header+div#content+div#footer);E*N元素倍增(ul#nav\u003eli*5\u003ea);E$*N条目编号 (ul#nav\u003eli.item-$*5);正如你能看到的,你已经知道如何使用Zen Coding了:只是些一个简单的仿
层叠样式表选择器。
元素类型Zen Coding有两个主要的元素类型: “片段(snippets)”和“缩写(abbreviations)”。片段就是随意的代码碎片,而缩写是标签定义。通过片段,你可以写出你想要的任何代码,它也会照你写的格式输出;但是你必须手动的格式化它(使用\n 和\t实现换行和缩进) 并将变量放到你想要输出子元素的地方,就像这样:cc:ie6\u003estyle。如果你不使用变量,子元素将会输出于代码片段的 后面。
有了缩写,您必须编写标记定义,而且语法是非常重要的。通常,你必须写一个简单的带有所有默认的属性的标签,比如: \u003ca href=”"\u003e\u003c/a\u003e。当Zen Coding被加载后,它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以,如果你写\u003cimg src=”" alt=”" /\u003e,你会告诉Zen Coding这个标签必须是空的,然后“扩展缩写”行为就会在输出之前为它使用特定的规则。
对于片段和缩写,你可以添加一个管道符号,它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的,Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。
缩写包裹
这真的是一个很酷的特性,它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要 添加一个包裹元素以修正一个浏览器bug?或者你需要添加一个装饰,比如一个背景图片或者边框到一个块级内容?你必须写开始标签,临时打断你的代码,找到相关的点然后关闭标签。这就是“使用缩写包裹”能帮助你的地方。
该功能相当简单:它要求你输入缩写,然后执行适当的“展开缩写”行动并将你期望的文本放到你缩写的最后一个元素里面。如果你没有选择任何文本,它就会启动标签对匹配器并使用结果。它同样能搞清楚你的光标的位置:标签的内容里面或者是开始和关闭标签中间。依赖于它的位置,它会包裹标签的内容或标签本身。
缩写包裹为包裹个别行引入了一个特定的缩写句法。简单跳转到倍增操作符后面的数字,比如:ul#nav\u003eli*\u003ea。当Zen Coding 发现一个使用未定义的倍增数的时候,它会将它作为一个重复元素:你的章节中有多少行,它就会输出多少次,并将每行的内容放到重复元素的最后一个子元素里面。
编辑器
Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件:它获取文本、做一些处理并放回新的文本(或索引,用于标签匹配)。Zen Coding由
ECMAScript和
Python编写,所以它实际上可以运行于任何平台。在Windows,你可以运行JavaScript版本,而
麦金塔和
Linux 分支可以使用Python版。
如果让你的编辑器支持Zen Coding,你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的
插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如,TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能,但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。
编写实例
div#page\u003ediv.logo+ul#navigation\u003eli*5\u003ea
\u003cdiv id="page"\u003e
\u003cdiv class="logo"\u003e\u003c/div\u003e
\u003cul id="navigation"\u003e
\u003cli\u003e\u003ca href=" "\u003e\u003c/a\u003e\u003c/li\u003e
\u003cli\u003e\u003ca href=" "\u003e\u003c/a\u003e\u003c/li\u003e
\u003cli\u003e\u003ca href=" "\u003e\u003c/a\u003e\u003c/li\u003e
\u003cli\u003e\u003ca href=" "\u003e\u003c/a\u003e\u003c/li\u003e
\u003cli\u003e\u003ca href=" "\u003e\u003c/a\u003e\u003c/li\u003e
\u003c/ul\u003e
\u003c/div\u003e
目前 Zen Coding 已经更名为 Emmet。更名之后,据说 Emmet 开始团队模式,增加CSS3和
html5许多新特性。项目地址从 code.
谷歌 移
GitHub