CSS代码火速编写神器，CSS代码飞速编写技术

2019-11-14 19:07来源：未知

Zen Coding: 一种快速编写HTML/CSS代码的方法

2012/05/17 · CSS · 2 评论 · CSS

英文原文：Smashing Magazine，翻译：前端观察

在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。

你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间？如果你的编辑器有代码提示功能，你编写的时候就会容易些，但即便如此你还是要手动敲入很多代码。

在JavaScript方面，当我们想要在一个页面上获取某个特定的元素时，我们就会遇到同样的问题，我们必须写很多代码，这就变得难于维护和重用。JavaScript框架应运而生，它们同时引入了CSS选择器引擎。现在，你可以使用简单的CSS表达式来获取DOM元素，这相当酷。

但是，如果你不仅仅可以用CSS的选择器布局和定位元素，还能生成代码会怎么样？比如，如果你这样写：

CSS

div#content>h1 p

1	div#content>h1 p

…然后就可以看到这样的输出：

XHTML

<p></p>

</div>

有些迷惑吧？今天，我将向你介绍Zen Coding，一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。

[youku id=”XMTM4NDQwNzgw”]

注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：，上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示，一样很精彩：。PS:貌似youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。

如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：

Demo

●Demo (使用 Ctrl , 展开缩写，需要JavaScript支持)

●中文版演示

下载(完全支持)

●Aptana (跨平台);

●Coda, via TEA for Coda (Mac);

●Espresso, via TEA for Espresso (Mac);

下载(部分支持，只支持“展开缩写”)

TextMate(只能用于Mac机,Windows可以使用E-text编辑器替代);

●TopStyle;

●Sublime Text;

●GEdit;

●Dreamweaver CS4

●editArea在线编辑器;

●Zen Coding在线编辑器中文版

现在让我们看一下这些工具是如何工作的吧。

展开缩写

展开缩写功能将类似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选择器(呃，“缩写”抱歉)，就像这样…

…然后调用”展开缩写”行为。

这里有两个新增的操作符：元素倍增和条目编号。比如，如果你想生成5个<li>元素，你可以简单的写位li*5。它也将同样重写全部子代元素。如果你想写4个<li>元素，每个里面都有一个<a>标签，你就可以简单的写为li*4>a，这样会生成以下 HTML代码：

XHTML

最后一个——条目编号用于当你想用索引标记重复的元素的情况。假设你想生成class为item1、item2和item3的3个<div>元素。你可以写成这样的缩写，div.item$*3:

XHTML

只需在你想要索引出现的任何class或id属性上添加一个美元符号即可，而且想要多少都可以。那么，这样…

XHTML

div#i$-test.class$$$*5

1	div#i$-test.class$$$*5

会被转换成为:

XHTML

你会看到，当你写a的缩写的时候，输出是<a href=””></a>。或者，如果你写img，输出就是<img src=”” alt=”” />。

Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的？有一个专门的文件，名为zen_settings.js描述了输出元素。这是一个简单的JSON文件，描述每种语言的缩写(是的，你可以为不同的句法定义缩写，比如HTML、XSL、CSS等)。通用的语言缩写定义看起来就像这样：

JavaScript

'html': { 'snippets': { 'cc:ie6': '', ... }, 'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />', ... } }

'html': { 'snippets': { 'cc:ie6': '',

...

'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',

...

}

元素类型

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

有了缩写，您必须编写标记定义，而且语法是非常重要的。通常，你必须写一个简单的带有所有默认的属性的标签，比如: <a href=””></a>。当Zen Coding被加载后，它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以，如果你写<img src=”” alt=”” />，你会告诉Zen Coding这个标签必须是空的，然后“扩展缩写”行为就会在输出之前为它使用特定的规则。

对于片段和缩写，你可以添加一个管道符号，它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的，Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。

例子

那么，这里解释一下当你写了一个缩写并召唤“展开缩写”行动时发生的事情。首先，它将一个完整的缩写分开为独立的元素：这样div>a 会被分成div 和a 元素，当然也会维持他们的关系。然后，每个元素，解析器先在代码片段内而后在缩写中寻找定义。如果它找不到，将会使用元素的名字作为新的标签，并为其添加缩写中定义的id和class。比如，如果你写mytag#example，解析器在片段或缩写中找不到mytag定义，它就会输出<mytag id=”example”><mytag>。

我们制作了很多默认的CSS和HTML缩写和片段。你会发现学习使用Zen Coding可以增加你的生产力。

HTML 标签对匹配器

对于HTML编码者的另一个非常常见的任务是寻找一个元素的标签对。例如你想选择整个<div id=”content”>标签并将其移动到其它地方或者删除它。或者有可能你在寻找一个关闭标签并想知道它属于那个开始标签。

不幸的是，很多现代开发工具在该功能方面有所欠缺。那么我就决定写一个我自己的标签对匹配器作为Zen Coding的一部分。不过它依然在beta阶段并尚存一些问题，但它可以工作的很不错并很快。不是浏览整个文档(像通常的那种HTML标签对匹配器的做法)，它从光标的当前位置开始寻找相关的标签。这使得它非常快并且上下文无关：它甚至可以用于这段JavaScript代码片段：

JavaScript

var table = '<table>'; for (var i = 0; i < 3; i ) { table = '<tr>'; for (var j = 0; j < 5; j ) { table = '<td>' j '</td>'; } table = '</tr>'; } table = '</table>';

var table = '<table>'; for (var i = 0; i < 3; i ) {

table = '<tr>'; for (var j = 0; j < 5; j ) {

table = '<td>' j '</td>';

}

table = '</tr>';

}

table = '</table>';

使用缩写包裹

这真的是一个很酷的特性，它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器bug？或者你需要添加一个装饰，比如一个背景图片或者边框到一个块级内容？你必须写开始标签，临时打断你的代码，找到相关的点然后关闭标签。这就是“使用缩写包裹”能帮助你的地方。

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

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

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

XHTML

About Us Products News Blog Contact Up

About Us

Products

News

Blog

Contact Up

你将会得到以下结果：

XHTML

<div id="header"> <ul id="navigation"> <li><a href=""><span>About Us</span></a></li> <li><a href=""><span>Products</span></a></li> <li><a href=""><span>News</span></a></li> <li><a href=""><span>Blog</span></a></li> <li><a href=""><span>Contact Up</span></a></li> </ul> </div>

<li><a href=""><span>About Us</span></a></li>

<li><a href=""><span>Products</span></a></li>

<li><a href=""><span>Contact Up</span></a></li>

</ul>

</div>

你可以看到，Zen Coding是一个强大的文本处理工具。

快捷键

●Ctrl ,

展开缩写

●Ctrl M

匹配对

●Ctrl H

使用缩写包括

●Shift Ctrl M

合并行

●Ctrl Shift ?

上一个编辑点

●Ctrl Shift ?

下一个编辑点

●Ctrl Shift ?

定位匹配对

这些快捷键是可以自定义的。

在线演示

你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢？因为Zen Coding是用纯JavaScript开发并迁移到Python，它甚至可以用于浏览器内部，这令它成为引入到CMS的首选。

●Demo (使用 Ctrl , 展开缩写，需要JavaScript支持)

●中文版演示

支持的编辑器

Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件：它获取文本、做一些处理并放回新的文本(或索引，用于标签匹配)。Zen Coding由JavaScript和Python编写，所以它实际上可以运行于任何平台。在Windows，你可以运行JavaScript版本，而 Mac和Linux 分支可以使用Python版。

如果让你的编辑器支持Zen Coding，你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如，TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能，但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。

完全支持

●Aptana (跨平台);

●Coda, via TEA for Coda (Mac);

●Espresso, via TEA for Espresso (Mac);

部分支持(只支持“展开缩写”)

●TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);

●TopStyle;

●Sublime Text;

●GEdit;

●Dreamweaver CS4

●editArea在线编辑器;

●Zen Coding在线编辑器中文版

Aptana是我主要的开发环境，它使用一个JavaScript版本的Zen Coding。它也包含很多其它的我用于日常工作的工具，所以任何一个新的Zen Coding版本都将会首先对Aptana可用，然后部署到Python并兼容其它的编辑器。

Coda和Espresso 插件被杰出的Text Editor Actions (TEA) 平台支持，由Ian Beck开发。原始的源代码在GitHub上，但我还是制作了我自己的分支以整合Zen Coding的特性。

总结

很多尝试过Zen Coding的人都说它改变了他们写页面的方式。当然还有很多事情要做，还有很多的编辑器需要被支持以及一些文档要写。请浏览现在的文档以及源代码以寻找你的问题的答案。希望你喜欢Zen Coding!

附：Zen coding的具体用法

遗憾的是，本文原作者并没有说明zen coding的具体用法，神飞认为有必要做以下简要的说明。这里就以Aptana/Eclipse和Dreamweaver为例，其它编辑器平台暂不描述，如有疑问可以在评论中与前端观察的网友交流。

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用Aptana，下面的第一步可以跳过。

1、通过更新网站安装EclipseMonkey (如果你使用Aptana，可跳过这一步)

2、在你的当前工作去创建一个顶级的项目，给它命名，比如，就叫zencoding<

3、在新创建的项目中创建scripts文件夹

4、解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:

5、安装之后，Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单

注意事项：

●Aptana版的官方插件是基于MAC机的，如果你用的是Windows，需要手动更改快捷键(在每个文件头部的注释片段中更改)

●官方的文件编码有点儿乱，修改官方js的时候，请注意编码问题，修改不当会造成相关功能的丢失；

DreamWeaver

好消息是，现在已经有了Zen coding for DreamWeaver插件，坏消息是，该插件支持的功能很少，只支持展开缩写功能。而且默认的快捷键是无效的。只能在“命令”菜单中点击操作。另外，没有测试该插件是不是只支持CS4版本。不过比较好的是，作者将本插件的源码也放出了，你可以自定义一个Dreamweaver的插件。

PS:官方的DW插件已经更新，推荐到官方去下载。新的插件添加了更多的功能支持。UPDATE @ 12-23-2009

特别推荐：豪情同学将缩写给实践了一番，总结出了很多很棒的用例，推荐大家前去学习。

原作者介绍：

Sergey Chikuyonok是一位俄罗斯的前端开发工程师和作者，他在优化方面有很大的热情：从图片、JavaScript效果到工作流程和节省时间的编码。访问他的主页和他的Twitter。

赞 2 收藏 2 评论

去年就知道了Sublime Text 2这款编辑器，当时就颇有好感，还用了一段时间来进行开发。最近，偶然知道了还有Zen Coding这样的一个插件之后，简直对这个插件以及可以支持插件的Sublime Text 爱不释手。

Emmet:HTML/CSS代码快速编写技巧，emmetcss

一、Emmet简介

Emmet的前身是Zen Coding，它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，由两个核心组件组成：一个缩写扩展器（缩写为像CSS一样的选择器）和上下文无关的HTML标签对匹配器。

二、快速编写HTML代码

1.初始化

　　HTML文档需要包含一些固定的标签，比如<html>,<head>,<body>等，利用Emmet可以1秒钟就可以完成这些标签的输入。

比如：输入“!”或“html:5”,然后按Tab键，就能生成：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

html:5或!：用于HTML5文档类型；

html:xt：用于XHTML过滤文档类型；

html:4s：用于HTML4严格文档类型。

2.轻松添加类，id，文本和属性

连续输入元素名称和ID，Emmet会自动补全，比如：输入p#foo，就能生成：

<p id="foo"></p>

连续输入类和id，比如：p.bar#foo，会自动生成：

<p class="bar" id="foo"></p>

定义元素的内容：

h1{内容}：

<h1>内容</h1>

定义元素的属性：

a[href=#]:

<a href="#"></a>

3.嵌套

利用Emmet只需一行代码就可以实现标签的嵌套：

>：子元素符号，表示嵌套的元素；

：同级标签符号；

^：可以使用该符号前的标签提升一行。

比如：

p>span：

<p></p>

h1 h2：

<h1></h1><h2></h2>

p>span^p：

<p></p><p></p>

4.分组

利用Emmet可以通过嵌套和括号快速生成一些代码块，比如：输入(.foo>h1) (#bar>h2)，会自动生成：

<div class="foo">
    <h1></h1>
</div>
<div id="bar">
    <h2></h2>
</div>

5.隐式标签

申明一个带类的标签，只需输入div.item，就会自动生成：

<div class="item"></div>

在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在<ul> 中输入.item，就会生成<li class="item"></li>。

li：用于ul和ol中；

tr：用于table、tbody、thead和tfoot中；

td：用于tr中；

option：用于select和optgroup中。

6.定义多个元素

要定义多个元素，可以使用符号*，比如：ul>li*5:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

7.定义多个带属性的元素

输入ul>li.item$*3，将会自动生成：

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

三、CSS缩写

1.值

比如要定义元素的宽度，只需输入w100，即可生成：

width: 100px;

除了px，还可以生成其他单位，比如输入h10p m5e，会生成：

height: 10%;
margin: 5em;

单位别名列表：

p：表示%；

e：表示em；

x：表示ex。

2.模糊匹配

如果有些缩写在写的时候拿捏不准，Emmet会根据输入的内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh都会生成：

overflow: hidden;

3.供应商前缀

如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：

 -webkit-transition: prop time;
 -moz-transition: prop time;
 -ms-transition: prop time;
 -o-transition: prop time;
 transition: prop time;

如果不希望加上所有前缀，也可以使用缩写来指定，比如输入：-wm-trf，表示只加上-webkit和-moz前缀：

 -webkit-transform: ;
 -moz-transform: ;
 transform: ;

前缀说些如下：

w：表示-webkit-；

m：表示-moz-；

s：表示-ms-；

o：表示-o-。

4.渐变（webStorm不支持）

输入lg(left,#fff 50%,#000)，会自动生成：

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));  
background-image: -webkit-linear-gradient(left, #fff 50%, #000);  
background-image: -moz-linear-gradient(left, #fff 50%, #000);  
background-image: -o-linear-gradient(left, #fff 50%, #000);  
background-image: linear-gradient(left, #fff 50%, #000);

四、针对不同编辑器的插件

Emmet支持如下编辑器：

1.Sublime Text 2;

2.TextMate 1.X;

3.Eclipse/Aptana;

4.Coda 1.6 and 2.x;

5.Espresso;

6.Chocolat（通过“Install Mixin”对话框添加);

7.Komodo Edit/IDE（通过Tools → Add-ons菜单添加);

8.Notepad ;

9.PSPad;

10.<textarea>;

11.CodeMirror2/3;

12.Brackets;

13.WebStorm;

一、Emmet简介 Emmet的前身是Zen Coding，它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写...

Emmet插件：HTML/CSS代码快速编写神器，emmetcss

Emmet插件的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：

该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。

*
*一、快速编写HTML代码

1. 初始化 *

HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键：

html:5 或!：用于HTML5文档类型
html:xt：用于XHTML过渡文档类型
html:4s：用于HTML4严格文档类型

2. 轻松添加类、id、文本和属性

连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：

连续输入类和id，比如p.bar#foo，会自动生成：

Html代码

<p class="bar" id="foo"></p>

下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码：

Html代码

<h1>foo</h1>
<a href="#"></a>

3. 嵌套

现在你只需要1行代码就可以实现标签的嵌套。

>：子元素符号，表示嵌套的元素
：同级标签符号
^：可以使该符号前的标签提升一行

效果如下图所示：

4. 分组

你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1) (.bar>h2)，会自动生成如下代码：

Html代码

<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>

5. 隐式标签

声明一个带类的标签，只需输入div.item，就会生成<div class="item"></div>。

在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。

下面是所有的隐式标签名称：

li：用于ul和ol中
tr：用于table、tbody、thead和tfoot中
td：用于tr中
option：用于select和optgroup中

6. 定义多个元素

要定义多个元素，可以使用*符号。比如，ul>li*3可以生成如下代码：

Html代码

<ul>
<li></li>
<li></li>
<li></li>
</ul>

7. 定义多个带属性的元素

如果输入 ul>li.item$*3，将会生成如下代码：

Html代码

<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>

//当然此处改为 ul>li#item$*3也是可以，结果如下

二、CSS缩写

1. 值

比如要定义元素的宽度，只需输入w100，即可生成

Css代码

width: 100px;

除了px，也可以生成其他单位，比如输入h10p m5e，结果如下：

Css代码

height: 10%;
margin: 5em;

单位别名列表：

p 表示%
e 表示 em
x 表示 ex
px或者不加单位可表示px // Kerita所加

2. 附加属性

可能你之前已经了解了一些缩写，比如 @f，可以生成：

Css代码

@font-face {
font-family:;
src:url();
}

一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“ ”符号来生成，比如输入@f ，将生成：

Css代码

@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}

3. 模糊匹配

如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：

Css代码

overflow: hidden;

4. 供应商前缀

如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：

Css代码

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo：

Css代码

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：

Css代码

-webkit-transform: ;
-moz-transform: ;
transform: ;

前缀缩写如下：

w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-

5. 渐变

输入lg(left, #fff 50%, #000)，会生成如下代码：

Css代码

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

三、附加功能

生成Lorem ipsum文本

Lorem ipsum指一篇常用于排版设计领域的拉丁文文章，主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过Emmet，你只需输入lorem 或 lipsum即可生成这些文字。还可以指定文字的个数，比如lorem10，将生成：

引用 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

四、定制

你还可以定制Emmet插件：

添加新缩写或更新现有缩写，可修改snippets.json文件
更改Emmet过滤器和操作的行为，可修改preferences.json文件
定义如何生成HTML或XML代码，可修改syntaxProfiles.json文件

五、针对不同编辑器的插件

Emmet支持的编辑器如下（链接为针对该编辑器的Emmet插件）：

Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat （通过“Install Mixin”对话框添加)
Komodo Edit/IDE （通过Tools → Add-ons菜单添加)
Notepad
PSPad
<textarea>
CodeMirror2/3
Brackets

Officially supported editors

Aptana/Zend Studio/Eclipse (crossplatform)
TextMate (Mac). Available in two flavors: basic snippets (Zen HTML and Zen CSS) and full-featured plugin (ZenCoding for TextMate)._{Bundles > Zen Coding menu item}
Coda (Mac) — external download, via TEA for Coda. _{Plug-ins > TEA for Coda > Zen Coding menu item}
Espresso (Mac) — external download, via TEA for Espresso. Zen Coding is bundled with Espresso by default, but you should upgrade ZC to latest version. _{Actions > HTML menu item}
Komodo Edit/IDE (crossplatform) — external download. _{Tools > Zen Coding menu item}
Notepad (Windows). _{Zen Coding menu item} Also a Python version of NPP plugin is available:
PSPad (Windows). _{Scripts > Zen Coding menu item}
<textarea> (browser-based). See online demo.
editArea (browser-based). See online demo.
CodeMirror (browser-based). See online demo.
CodeMirror2 (browser-based). See online demo.

Third-party supported editors

Dreamweaver (Windows, Mac)
Sublime Text (Windows)
Sublime Text 2 (crossplatform) — external download
UltraEdit (Windows)
TopStyle (Windows)
GEdit (crossplatform) — Franck Marcia's plugin, Mike Crittenden's plugin
BBEdit/TextWrangler (Mac) — external download
Visual Studio (Windows) — at Visual Studio Gallery
EmEditor (Windows) — external download
Sakura Editor (Windows) — external download
EditPlus (windows) — external download, release notes
NetBeans (crossplatform) — download
Chrome Extension — external download
Userscript for Greasemonkey — external download
Geany — external download
RJ TextEd — built in since v7.50
AkelPad — external download
WIODE web-based IDE
BlueFish — built-in in v2.2.1

Zen Coding 的用法

使用ZenCoding编写代码时，需要遵循一定的缩写规则：

E
元素名（div、p）；
E#id
带Id的元素（div#content、p#intro、span#error）；
E.class
带class的的元素（div.header、p.error）,id和class可以连着写，div#content.column
E>N
子元素（div>p、div#footer>p>span）
E*N
多项元素（ul#nav>li*5>a）
E N
多项元素
E$*N
带序号的元素

Sublime Text 中使用Zen Coding的一些技巧

1、缩写扩展（Expand Abbreviation）。

之前知道，通过Control ＋ Alt ＋ Enter可以在一个新行中输入ZC的缩写，来生成代码。同时，如果我们在编辑中直接书写了ZC缩写，比如 div#content>p 当光标放置在p之后时，可以通过Tab键来扩展，ZC会从光标处开始向左侧搜索到第一个空白处，之间的代码作为ZC缩写，这样不必每次打开新行输入，提高了效率，缺点就是不能够实时预览。

2、嵌套代码（Wrap with Abbreviation）