Zen Coding插件

在我们编写HTML或CSS代码时，有时候会重复编写相似代码，包括所有标签、属性、引用、大括号等，这浪费了我们大量的时间，降低了效率，不利于日常开发。

如果编辑器有代码提示功能，我们编写代码的时候就会容易些，但即便如此还是要手动敲入很多代码。

举个例子：

CSS缩写形式：

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

应用于网页HTML的样式：

<divid="page">

<divclass="logo"></div>

<ulid="navigation">

</ul>

</div>

这就是Zen Coding，一组用于快速HTML和CSS编码的工具。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。

展开缩写

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

元素类型

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

缩写包裹

这真的是一个很酷的特性，它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器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来选择内容。

总结

很多尝试过Zen Coding的人都说它改变了他们写页面的方式。当然还有很多事情要做，还有很多的编辑器需要被支持以及一些文档要写。希望你喜欢Zen Coding!

Zen Coding插件相关推荐

给Sublime text2安装Zen Coding插件
转载自:http://m.blog.csdn.net/blog/u013867072/38714069 原文内容://----------------------------------------- ...
notepadd++安装zen coding插件
1.解压Zen Coding组件 2.把上图一个文件和一个文件夹复制到plugins下面即可 3.重启notepad++,在工具栏可看到Zen Coding 在notepad++上用快捷键Ctrl+E ...
notepad++配置Zen Coding
2019独角兽企业重金招聘Python工程师标准>>> Notepad++ 是一款无比轻巧便捷的代码编辑工具.它无可挑剔的启动速度,优秀的语法高亮,干净整齐的代码缩进,便捷的括号高亮 ...
Sublime Text 2以及Zen Coding
去年就知道了Sublime Text 2这款编辑器,当时就颇有好感,还用了一段时间来进行开发.最近,偶然知道了还有Zen Coding这样的一个插件之后,简直对这个插件以及可以支持插件的Sublime ...
在Aptana下安装Zen coding
Zen coding无疑是一款高效开发的插件,适用于多平台,支持非常多的IDE.由于最近要写一些HTML和一些CSS,听别人说写这些用Aptana就最好了.于是也捣鼓了一下,顺便把安装过程给记录下来. ...
Zen Coding css,html缩写替换大观快速写出html,css
阅读本文,先仔细阅读网站文章. Zen Coding 快速编写HTML/CSS代码的实现复制代码代码如下: E 元素名称(div, p); E#id 使用id的元素(div#content, p# ...
Zen Coding 系列教程一:入门
Zen Coding 是一款高效用于开发HTML与CSS的编码插件,可以安装到很多软件中使用 Zen Coding 项目:http://code.google.com/p/zen-coding/ ...
Web开发人员的必备工具 - Emmet (Zen Coding)
日期:2012-11-6 来源:GBin1.com 如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速 ...
Zen Coding Visual Studio plugin 配置
昨天在新闻频道看到编程之禅:Zen Coding 很有意思改变书写Html的方式就像Jquery与Javascript一样,Zen Coding 项目托管在 google code 上面 ...
notepad快速编写html,notepad 结合Zen Coding快速编写HTML代码 | css3教程
经朋友介绍认识了Zen Coding一款快速编写HTML代码的插件,然后在google搜索一下其使用,让在下激动不以,今天特意写了一篇blog来跟大家一起分享. Zen Coding其实是一款快速编写 ...

Zen Coding插件

Zen Coding插件相关推荐

最新文章

热门文章