发表评论 阅读评论 Zen Coding初体验 确实爽
一直听说Zen Coding 最近一直在研究前端最合适的IDE 所以也索性尝试了一下
ZenCoding项目地址：http://code.google.com/p/zen-coding/
先说环境 我是在MyEclipse > aptana 下面安装的Zen Coding
安装方法不难 建立一个项目 新建一个文件夹叫 script 然后把Zen Coding拷贝进去就可以了
Aptana/Eclipse
由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用 Aptana，下面的第一步可以跳过。
- 通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如 果你使用Aptana，可跳过这一步)
- 在你的当前工作去创建一个顶级的项目，给它命名，比如，就叫zencoding
- 在新创建的项目中创建scripts文件夹
- 解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:
- 安装之后，Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单
注意事项：
- Aptana版的官方插件是基于MAC机的，如果你用的是Windows，需要手动更改快捷键(在每个文件头部的注释片段中更改)
- 官方的文件编码有点儿乱，修改官方js的时候，请注意编码问题，修改不当会造成相关功能的丢失
试用了一下发现确实很爽
具体的看下面介绍
做一个简单的Demo
html:xxs
div#header>div#logo.left+ul#menu>li*5>a
两行代码下去 生成的结果
</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p> <p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></p> <p><head></p> <p> <title></title></p> <p> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /></p> <p></head></p> <p><body></p> <div id="header"> <div id="logo" class="left"></div> <ul id="menu"> <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> <p></body></p> <p></html></p> <p>
方便快捷 下面介绍一下选择符用法
这里是一个支持的属性和操作符的列表：
* 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);
具体的还要等我用熟了再给大家介绍了
本文部分内容转自互联网
呵呵，最近我也在用，即简单又实用，大大的提高了工作效率。