开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
zen-coding首页、文档和下载 - 网页开发工具 - 开源中国社区
全部项目分类
我要评价
MIT
JavaScript HTML/CSS
跨平台
pepelsbey
分享
收藏
6 人收藏
收录时间:2012-05-20
zen-coding 详细介绍

一种快速编写HTML/CSS代码的方法 使用仿CSS选择器的语法来快速开发HTML和CSShtml+css 代码快速编写

html+css 代码快速编写

——由Sergey Chikuyonok开发。

Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。

展开缩写

展开缩写功能将类似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选择器。

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

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

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

使用缩写包裹

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

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

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

支持的编辑器

Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件:它获取文本、做一些处理并放回新的文本(或索引,用于标签匹配)。Zen Coding由JavaScript和Python编写,所以它实际上可以运行于任何平台。在Windows,你可以运行JavaScript版本,而Mac和Linux 分支可以使用Python版。

如果让你的编辑器支持Zen Coding,你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如,TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能,但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。

编写实例

CSS缩写形式:

div#page>div.logo+ul#navigation>li*5>a


大家对 zen-coding 的评论 (全部 0 条评论)
{{repayCom.userName}}
zen-coding 相关博客
顶部