Zen Coding 一种快速编写HTML-CSS代码的方法(写更少的代码,做更多的事)

    Zen Coding是一个强大的文本处理工具,你会发现学习使用Zen Coding可以增加你的生产力(HTML缩写和片段默认CSS)。支持多种编辑器(Zen coding for DreamWeaver插件,Aptana/Eclipse,textArea,UltraEdit,等后面有下载地址)
    如果你不仅仅可以用CSS的选择器布局和定位元素,还能生成代码会怎么样?比如,如果你这样写:

div#header>div.logo+ul.nav>li*5>a

然后得到如下输出:

<div id="header">
  <div class="logo"></div>
  <ul class="nav">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

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

展开缩写
这里是一个支持的属性和操作符的列表:
* 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);
正如你上面看到的,就是这么简单。
使用缩写包裹
    这真的是一个很酷的特性,它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器bug?或者你需要添加一个装饰,比如一个背景图片或者边框到一个块级内容?你必须写开始标签,临时打断你的代码,找到相关的点然后关闭标签。这就是“使用缩写包裹”能帮助你的地方。

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

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

    如果你在这段文本外面包裹这段缩写 div#header>ul#navigation>li.item$*>a>span

About Us
Products
News
Blog
Contact Up

你将会得到以下结果:

<div id="header">
	<ul id="navigation">
		<li class="item1"><a href=""><span>About Us</span></a></li>
		<li class="item2"><a href=""><span>Products</span></a></li>
		<li class="item3"><a href=""><span>News</span></a></li>
		<li class="item4"><a href=""><span>Blog</span></a></li>
		<li class="item5"><a href=""><span>Contact Up</span></a></li>
	</ul>
</div>

是不是很炫。

快捷键
* Ctrl+,
展开缩写
* Ctrl+M
匹配对
* Ctrl+H
使用缩写包括
* Shift+Ctrl+M
合并行
* Ctrl+Shift+?
上一个编辑点
* Ctrl+Shift+?
下一个编辑点
* Ctrl+Shift+?
定位匹配对
这些快捷键是可以自定义的。

Zen Coding For Dreamweaver 插件官网地址:http://zen-coding.googlecode.com/files/Zen%20Coding.mxp

Aptana/Eclipse
由于Aptana本身就是基于Eclipse的,所以,Zen Coding也是支持Eclipse的,只是需要一个EclipseMonkey插件的支持,Aptana已经封装了这个插件,所以如果你使用Aptana,下面的第一步可以跳过。
1 通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如果你使用Aptana,可跳过这一步)
2 在你的当前工作去创建一个顶级的项目,给它命名,比如,就叫zencoding
3 在新创建的项目中创建scripts文件夹
4 解压缩下载的ZIP插件包到该文件夹
5安装之后,Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单
注意事项
* Aptana版的官方插件是基于MAC机的,如果你用的是Windows,需要手动更改快捷键(在每个文件头部的注释片段中更改)
* 官方的文件编码有点儿乱,修改官方js的时候,请注意编码问题,修改不当会造成相关功能的丢失;

各个编辑器插件的下载地址:http://code.google.com/p/zen-coding/downloads/list
源代码:svn checkout http://zen-coding.googlecode.com/svn/trunk/ zen-coding-read-only

分享到:
此条目发表在 html/css 分类目录。将固定链接加入收藏夹。

评论功能已关闭。