早在2009年,谢尔盖Chikuyonok写了一篇文章,提出了一种新的编写HTML和CSS代码的方式。这一革命性的插件,被称为zen coding,多年来已帮助许多开发人员,如今已达到一个新的水平。html
Emmet,之前被称为zen coding,或许是你见过的最有效率和节省时间的文本编辑器插件。Emmet经过简单的缩写瞬间扩大到复杂的代码片断,能够把你变成一个更高效的开发者。html5
这里是我总结的最喜欢的技巧,献给那些喜欢阅读的朋友。web
它是如何工做的?浏览器
让咱们面对它:编写HTML代码须要必定的时间,全部这些标签、属性、引号、括号等等,固然,大多数文本编辑器的代码均可以实现的,有很大帮助,但你仍是作了不少的打字。Emmet瞬间将复杂的代码片断扩展到简单的缩写。网络
HTML缩略语编辑器
初始化svg
建立一个新的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)编译。