Emmet 的功能不仅仅局限在快速生成标记语言结构或者生成 CSS 代码，它还具有很多常用的前端相关的功能，下面就来介绍几个比较常用的功能。

生成 Lorem Ipsum

Lorem Ipsum 表示一段随机看不懂的文字。Lorem Ipsum 的文字让人看不懂，这样才能忽略内容的含义而专注内容的排版，作为测试数据填充用的。使用 Emmet 生成 Lorem Ipsum 文本非常简单，只需要使用 lorem这一条命令即可，敲击 Tab 键之后，就会生成如下一段文字：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, dolor, aperiam ab repellendus blanditiis eum exercitationem. Quae, reprehenderit repellat impedit asperiores consequatur? Illum quos magnam odit omnis recusandae natus similique.

Emmet 的 lorem 命令不仅仅只有输出这么一段文字这样一个简单的功能，它既然作为测试数据，可以加上参数指定要输出的字符数量。例如，我们如果想输出一个十个单词的 h1 标题，我们就可以使用如下命令 h1>lorem10 。但是这项功能对于使用中文的网页测试来说，好像没有多大用处，毕竟中文和英语单词的排版是不同的。

跳转编辑区域

写代码一般要用到两只手，有时候需要跳转到别的代码段等，你可以使用键盘方向键也可以使用鼠标。但是这都有缺陷，使用键盘方向键移动太慢了，而且需要按住 shift 键和方向键选中代码；使用鼠标的话，手就必须离开键盘，来回也会浪费一些时间。而 Emmet 提供了一个很实用的功能，就是整块的跳转。

为了方便理解，先看一下官方的 Demo 动画。这个功能，使用 Shift+Ctrl+. 和 Shift+Ctrl+, 分别向下或者向上移动，选取的是一整块，先从标签开始，再是整个属性，再是属性值。这样，比键盘的方向键移动高效多了。

增加图片的尺寸大小

有时候，我们需要给 <img> 标签增加对应的 width、height 属性来表示图片的大小或者给通过 background-image 属性引用的背景图片一个尺寸大小。通常的做法是看一下图片的尺寸，然后加上，而现在，你只需要将光标移动到代码段，摁下 Ctrl+U 即可让 Emmet 自动读取图片的尺寸添加上。前提条件是图片比较存在并且正确引用进来了。

如果是针对 <img> 标签的，会在后面加上 width、height 属性，如果是 background 引入的，会在下面加上 width、height 的 CSS 属性。可以看一下官方的 Demo 。但是这里有个问题，官方的 Demo 中，实现这个功能的快捷键是 Shift+Ctrl+U 但实际使用中，这个快捷键不起作用。关于 Emmet 的 Mac、Win 下的快捷键，以这个页面上的为准：https://github.com/sergeche/emmet-sublime#available-actions。

更新 CSS 的属性值

我们在写 CSS 的时候，有时候为了 hack 写很多带有前缀的属性。例如：

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);

如果我们突然想修改一下旋转的角度值，那么我们就需要依次修改或者按住 Ctrl 多个选中进行修改。使用 Emmet 的话，就方便多了，我们只需要修改其中一个，然后摁下 Shift+Ctrl+R 键即可更新其他的相关属性值。

将图片资源转换成 data url 形式

data url 图片具有很多优点，在某些情况下比较实用，但是将图片转换成 data url 格式就比较麻烦了，得使用一些工具。而在 Emmet 中，将光标移动到 background: url() 中的图片位置的地方，按下Ctrl+’ 即可将图片编码成 data url 格式。当然，前提条件是图片资源引用正确。

除此之外，Emmet 还有一些其他的诸如快速跳转、计算等等常用功能，在这里只是介绍了几个更常用的功能，有兴趣的朋友可以打开Emmet Action 的官方文档看一下 Demo，这里不再赘述。

在前面，潜行者 m 介绍了 Emmet 的功能和如何使用 Emmet 来生成 HTML 代码，这次再来讲解一下如何使用 Emmet 提高 CSS 编写效率。

首先，Sublime Text 2 已经提供了比较强大的 CSS 样式所写方法来提高 CSS 编写效率。例如编写 position: absolute; 这一个属性，我们只需要输入 posa 这四个字母即可。它会弹出缩写样式的提示：

你不妨在编写 CSS 的时候，留意一下 ST2 提供了哪些属性的缩写方法，这样就可以提高一定的效率了。但是 Emmet 提供了更多的功能，请往下看。

简写属性和属性值

如果你想生成 width:100px; 你只需要输入 w100 就可以了，因为 Emmet 的默认设置 w 是 width 的缩写，后面紧跟的数字就是属性值。默认的属性值单位是 px ，你可以在值的后面紧跟字符生成单位，可以是任意字符。例如，w100foo 会生成 width:100foo; 这样一条语句。你同样也可以简写属性单位，如果你紧跟属性值后面的字符是 p ，那么将会生成 width:100%; 这样的语句，其中 p 表示百分比单位。与此类似的还有：e → em; x → ex。

例如 margin 这样的属性，可能并不是一个属性值，生成多个属性值需要用横杠（-）连接两个属性值，因为 Emmet 的指令中是不允许空格的。例如使用 m10-20 这条命令可以生成 margin: 10px 20px; 这样一条语句。如果你想生成负值，多加一条横杠即可。需要注意的是，如果你对每个属性都指定了单位，那么不需要使用横杠分割。例如使用 m10ff20ff 这条命令可以生成 margin: 10ff 20ff; 这条语句，如果你在 20ff 前面加了横杠的话，20ff 就会变成负值了。

如果你想一次生成多条语句，可以使用 ‘+’ 连接两条语句，例如使用 h10p+m5e 可以生成 height: 10%;margin: 5em; 这两条语句。

颜色值也是可以快速生成的，例如 c#3 → color: #333;，更复杂一点的，使用 <code>bd5#0s 可以生成 border: 5px #000 solid; 这样一句。下面是规则：

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

生成 !important 这条语句也当然很简单，只需要一个 ‘!’ 就可以了。

增加额外的选项

使用 @f 即可生成 CSS3 中的 font-face 的代码结构：

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

但是这个结构太简单，不包含一些其他的 font-face 的属性，诸如 background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等属性，我们可以在生成的时候输入 ‘+’ 生成增强的结构，例如我们可以输入 @f+ 命令，即可输出选项增强版的 font-face 结构：

@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;
 }

增加实验性前缀（Vendor Prefixes）

CSS3 等现在还没有出正式的 W3C 规范，但是很多浏览器已经实现了对应的功能，仅作为测试只用，所以在属性前面加上自己独特的实验性前缀，不同的浏览器只会识别带有自己规定前缀的样式。然而为了实现兼容性，我们不得不编写大量的冗余代码，而且要加上对应的前缀。使用 Emmet 可以快速生成带有前缀的 CSS3 属性。

ST2 已经内置了一些常见的需要实验性前缀的 CSS3 属性，例如输入 trf 会弹出提示，然后敲击回车键即可生成。而 Emmet 增强了这个功能。在任意字符前面加上一条横杠（-），即可生成该属性的带前缀代码，例如输入 -foo-css，会生成：

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

虽然 foo-css 并不是什么属性，但是照样可以生成。此外，你还可以详细的控制具体生成哪几个浏览器前缀或者先后顺序，使用 -wm-trf 即可生成：

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

可想而知，w 就是 webkit 前缀的缩写，m 是 moz 前缀缩写，s 是 ms 前缀缩写，o 就是 opera 浏览器前缀的缩写。如果使用 -osmw-abc 即可生成：

-o-abc: ;
 -ms-abc: ;
 -moz-abc: ;
 -webkit-abc: ;
 abc: ;

生成渐变背景

CSS3 中新增加了一条属性 linear-gradient 使用这个属性可以直接制作出渐变的效果。但是这个属性的参数比较复杂，而且需要添加实验性前缀，无疑需要生成大量代码。而在 Emmet 中使用 lg() 指令即可快速生成，例如：使用 <code>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 的还有一些其他的强大功能，将在后面继续讲解介绍，尽请关注。