雨夜带刀's Blog

Zen-coding–高效的XHTML/CSS代码扩展插件

只要你对CSS的选择器比较熟悉,就可以利用简短的类似于CSS选择器的代码高效的编写出XHTML代码。

象这样一句简短的代码:(div#hea>h1#title>a)就可以快速的扩展成下面这段XHTML代码:

这是怎么实现的?在没搞清楚这是怎么回事的时候,你可能会相当迷惑。没关系,先看看下面的在线演示,感受下zen-coding的强大之处:

将鼠标的光标移动到你看到的那句代码的末尾然后按“Ctrl+,”(此处的快捷键在各编辑器中都不同,在这里是Dreamweaver中的快捷键,Notepad++的快捷键是”Ctrl+E”)就可以看到变化了。

是不是有点奇怪,没错,就是这么“神奇”,这个功能同样可以在你的编辑器中使用,当然,前提是你得安装zen-coding这个插件。

zen-coding的下载地址:http://code.google.com/p/zen-coding/downloads/list

下载与安装:

下载与你的编辑器相对应的版本,zen-coding支持很多常见的编辑器,比如Notepad++,Dreamweaver,Aptana。Notepad++5.6.8和Dreamwaver CS5我都测试过,感觉不错。如果你是使用Notepad++的话需要把下载的插件解压到Notepad++的plugins目录下面,然后重新启动就可以看到在菜单栏多了一项Zen Coding。而如果你使用的是Dreamwaver,安装成功后会在命令菜单下多出一项Zen Coding。

如何使用?

zen-coding的使用其实很简单,先看看简单的一些写法:

div#mod

div.box

div.box1.box2

div.box1.box2#hello

上面的写法就是id和class的写法,下面的写法就涉及到层级了:

父级嵌套子级:h1>a

多级嵌套:div>h1.title>a

同辈元素的写法:div>a.text1+a.text2

给元素添加属性:a[href]


多个相同元素的写法:ul>li*2

按索引生成id:ul>li*#item-$*3

常见布局1:ul+

常见布局2:dl+

看完了这么多的例子,相信你对zen-coding有了一定的了解了,zen-coding也有很多高级的用法,也可以用在CSS的编写中。

zen-coding也可以把内容给包裹进来,比如写导航条的代码,你可以先把内容写好,然后使用zen-coding扩展成包含内容的代码,在这里我以Notepad++这个编辑器为例,在编辑器中先编辑好内容,如下图:

zen-coding演示

接下来使用鼠标将这些内容选中,然后找到Notepad++中的zen-coding菜单,选择“Wrap with Abbreviation”,这个时候就会弹出一个很小的网页对话框,如图:

zen-coding演示

这样就可以扩展成上面的这段包含了内容的代码,这里值得注意的是“li*”和“a*”后面并没有跟数量,这样zen-coding就可以根据内容来确定来扩展出多少行代码。

zen-coding应用在CSS中其实也挺简单的,只要记住常见的CSS属性的缩写就行了,比如width的缩写就是w,float的缩写就是fl,编写出缩写后按快捷键就可以扩展成相应的CSS代码。

zen-coding的使用就介绍到这里,如果你想要了解更详细的说明,你可以查阅它的官网,也可以留言和我交流。zen-conding的官网:http://code.google.com/p/zen-coding/

原载于:雨夜带刀’s Blog
本文链接:http://stylechen.com/zen-coding.html

如需转载请以链接形式注明原载或原文地址。

zp8497586rq
zp8497586rq

“Zen-coding–高效的XHTML/CSS代码扩展插件”目前已有 11 条评论

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。