Zen Coding改名Emmet-功能更智能化

早在2009年，谢尔盖Chikuyonok写了一篇文章，提出了一种新的编写HTML和CSS代码的方式。这一革命性的插件，被称为zen coding，多年来已帮助许多开发人员，现在已达到一个新的水平。

Emmet，以前被称为zen coding，或许是你见过的最有效率和节省时间的文本编辑器插件。Emmet通过简单的缩写瞬间扩大到复杂的代码片段，可以把你变成一个更高效的开发者。

这里是我总结的最喜欢的技巧，献给那些喜欢阅读的朋友。

它是如何工作的?

让我们面对它：编写HTML代码需要一定的时间，所有这些标签、属性、引号、括号等等，当然，大多数文本编辑器的代码都可以实现的，有很大帮助，但你还是做了很多的打字。Emmet瞬间将复杂的代码片段扩展到简单的缩写。

HTML缩略语

初始化

创建一个新的HTML文档只需要不到一秒钟。只需键入!或HTML 5，按“tab键”展开编辑器的一些标签，你会看到一个HTML5 doctype。

html:5 或者 ! 创建一个html5文档

html:xt 创建xhtml transitional文档

html:4s 创建 HTML4 strict doctype

轻松添加class，标识，文本和属性

因为Emmet用于描述元素的语法类似CSS选择器，使用它是很容易的。尝试混合元素的名称(如p)的标识符(例如p#description)。

此外，您还可以结合类和ID。例如p.bar#foo输出：

现在，让我们来看看如何定义你的HTML元素的内容和属性。使用花括号内表示其内容，H1 {foo}会产生这样的：

用方括号表示其属性。所以a[href=#] 输出

嵌套

通过嵌套的缩写，你可以只使用一行代码建立一个整个页面。>表示嵌套在前面元素的内部。同级兄弟元素用+表示，^表示返回树结构的上一个级别，使后面的元素与上一个级别同级。

分组

为了有效地利用嵌套并且不让它们变成一个乱七八糟的编码结构，你就需要组合一些代码片段。这就像数学-你只需要使用括号围绕若干幅。例如，(FOO> H1)+(foo> H2)将输出：

隐式标签名称

在过去，要输出一类的标签，只需键入div.item，那么就会产生如下图片的效果。Emmet只需输入.item即可生成，你可以省略一个div标记名称，Emmet更加智能化。它可以用父标签名称每次展开一个隐含的名称缩写。

乘法

您可以使用*运算符定义元素应该被输出多少次。因此，UL> LI * 3会产生：

编号

混合乘法功能与一些项目编号是什么?只要将操作元素的名称，属性名称或属性的值输出目前重复的元素的数量。如果你写输入ul> li.item的$ * 3，将输出：

Emmet HTML缩写在线测试工具-(Zen coding)，按tab键执行

CSS缩写

Emmet不仅仅用于HTML元素缩写编码，CSS缩写可以直接输入值，比方你要定义的宽度只需输入W100，它会产生：width： 100px;

像素不是唯一提供的单位。尝试运行h10p + M5E，它会输出：height:10%;margin:5em;

这里列出几个单位缩写：p →% e→EM x→EX

额外的操作

你已经知道@f，从而产生许多直观的缩写，如：

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

一些属性-如background-image，border-radius，font，@ font-face，text-outline，text-shadow -有一些额外的选项，你可以使用“ +“号激活。例如，@ F +将输出：

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

}

模糊搜索

Emmet CSS模块使用模糊搜索找到未知的缩写。所以，每次你输入一个未知的缩写，Emmet会试图找到最接近的片段定义。例如，OV:h 和OV-H和OVH和OH都是会输出相同的结果：overflow:hidden; 但是请大家务必以标准缩写为规范你的编码。

浏览器兼容前缀

CSS3很强大，但我们编入所有的这些浏览器供应商前缀是一个真正的痛苦。现在不会了Emmet解决了这个问题。例如，trs缩写将扩大到：

-webkit-transform: ; -MOZ-transform: ; -MS--transform: ; -o-transform: ; -transform: ;

您还可以添加到任何一种元素的前缀。你只需要使用-前缀标识。所以，-super-foo 将扩大到：

-webkit-super-foo: ; -moz-super-foo: ;等

如果你不希望输出所有这些前缀呢?没问题。您可以定义支持哪些浏览器。例如，-wm-trf将输出：

-webkit-transform: ; -MOZ-transform: ; -transform: ;

Emmet浏览器前缀缩写 w 输出 -webkit- m → -moz- s → -ms- o → -O-

渐变

说起恼人的CSS3特性，我们不能忘记梯度。那些长期用不同的符号定义现在可以很容易地更换为简洁的缩写。如lg(left,#FFF 50%,#000) ，并输出将是：

参考上面的gif图片，测试下Emmet CSS缩写吧，Tab键确认输出。(zen coding在线测试工具)

附加功能 ：请参见原文地址：http://coding.smashingmagazine.com/2013/03/26/goodbye-zen-coding-hello-emmet/#more-125747

本文由红蜘蛛网络联盟(www.rswebun.com)编译。