zen-coding

MIT
JavaScript HTML/CSS
跨平台
2012-05-20
pepelsbey

一种快速编写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

加载中

评论(0)

暂无评论

暂无资讯

暂无问答

notepad++配置Zen Coding

Notepad++ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度,优秀的语法高亮,干净整齐的代码缩进,便捷的括号高亮匹配赢得了无数人的喜爱。 但,其代码自动补全很“鸡肋”,或者说...

2012/08/06 07:42
2.9K
0
zen-Coding在Notepad++中的使用

转自:博客园 http://www.cnblogs.com/cobby/archive/2012/05/09/2492473.html zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复...

2012/11/08 18:27
110
0
【转载】Notepad++配置Zen Coding

原标题:Notepad++配置Zen Coding 为Notepad++安装 Zen Coding 插件 下载 Zen.Coding 解压 将解压所得的文件放入 Notepad++ 程序的安装目录下的plugins文件夹。 重启Notepad++,即可开始使用...

2013/09/14 23:40
143
0
Notepad++配置Zen Coding

为Notepad++安装 Zen Coding 插件 下载 Zen.Coding 解压 将解压所得的文件放入 Notepad++ 程序的安装目录下的plugins文件夹。 重启Notepad++,即可开始使用 Zen Coding。 Zen Coding 用法 首...

2012/06/01 13:26
2.7K
1
Notepad++结合Zen Coding快速编写HTML代码

Notepad++结合Zen Coding快速编写HTML代码 By Airen Apr05,11 经朋友介绍认识了Zend Coding一款快速编写HTML代码的插件,然后在google搜索一下其使用,让在下激动不以,今天特意写了一篇blo...

2011/11/02 12:30
571
0
ZenCoding更名为Emmet

Zen coding,想信大家早已听说了,一种快速编写HTML/CSS代码的方法。它使用仿CSS选择器的语法来快速开发HTML和CSS,和一般的编辑器中使用的“代码片段”概念不太一样,Zen coding使用动态的语...

2013/03/15 11:30
665
0
Web开发人员的必备工具 - Emmet (Zen Coding)

日期:2012-11-6 来源:GBin1.com 如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法。它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey ...

2012/11/06 13:10
117
0
Zen Coding 让Notepad++ 代码书写健步如飞

最近看了不少关于如何提高css代码编写率,有人说WebStorm编写代码速度快,正确率高。诚然,WebStorm的确有上述优点,但笔者平时更喜欢用notepad++来书写代码,下面就介绍一种让notep++快速、...

2013/06/09 17:48
198
0
NotePadd++中Zen Coding失效解决办法

今天在NotePad++中用Zen Coding的时候,突然发现不能用了....郁闷...在网上找答案的时候,发现别人都是Ctrl+Y的解决办法,好不容易找到了一个解决办法,记录下来: 由于文本的的编码是ANSI。...

2012/01/05 09:59
595
1
极客技术专题【004期】:Web开发人员的必备工具 - Emmet (Zen Coding)基本使用

日期:2013-5-8 来源:GBin1.com 技术专题介绍 分享专题:Web开发人员的必备工具 - Emmet (Zen Coding)初级介绍 分享人:极客标签技术编辑 - Cindy 授课时间:2013/05/11 20:00-21:00 课程类...

2013/05/08 12:51
33
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部