Emmet的一些新的用法【转】-白红宇

Emmet的一些新的用法【转】

阅读量：6853 次

发布时间：2019-06-26

本文共 1697 字，大约阅读时间需要 5 分钟。

Zen Coding是知名的前端编码辅助工具，可以极大简化HTML/CSS代码输入。简单说Zen Coding就是一个强大、智能的自动补全工具。出于品牌管理的考虑，Zen Coding这个名字已成往事，2012年年末作者把它改名为Emmet。其实我挺喜欢她原先大气上档次的名字，所以冒着标题党的危险，用Zen coding做标题，其实下面主要讲的是Emmet。

尽管Emmet（蚂蚁）名字略显屌丝，不过相比更新之前的 Zen Coding，支持的编辑器更多了，包括：Sublime Text，TextMate， Eclipse，Coda，NotePad++，CodeMirror等，甚至一些在线代码服务也支持：JSFiddle、JS Bin等。功能也增强了很多，提供了对HTML5和CSS3的支持，下面列举一些进行说明：

HTML缩写语法

输入 ! 或者 html:5 再按Tab可以输出HTML基本结构：

    
         Document

上面输出的是HTML5的文本类型申明，如果想要输出HTML4文本类型申明可以输入 html:4s 或者 html:4t 。

基本的标签缩写和展开形式如下：

a -> div.class -> 
     
div#id -> 
     
 div>p -> 
     
      
     
div+p ->

Emmet能够智能的补全标签名，如果输入省略了标签名，默认使用div，除非上下文标签有关联的情况，比如在 ul 中会自动采用 li：

.class -> 
     
ul>.class ->

除了这些，Emmet考虑到了一些复杂的标签结构，因此提供了非常丰富的缩写方式，比如：

标签属性

a[href] ->

一些标签属性还有进一步的缩写：

a:link -> input:c ->

组合

(div>p)+(div>span) ->

标签计数

ul>li*2 -> 
         
      
    
      
     
ul>li.item$*2 ->

注释及条件注释

c -> 
     cc:ie6 ->

CSS缩写语法

跟HTML的补全相比，CSS的补全更强大。Emmet会识别不完整的CSS属性，自动选择最匹配的结果来展开，比如 ov:h 或者 overf:h 都会展开成 overflow:hidden 。

属性

CSS的缩写官方有说明，基本是属性名缩写，比如：

pos:s -> position:static;mr -> margin-right:;

CSS属性非常多，包括CSS3的属性都能通过类似的缩写来展开，记不住官方文档里的缩写也不要紧，前面说了她的智能匹配特性，凭感觉写就好，你的想法Emmet基本都能猜到的。

属性前缀

CSS3的很多属性都包含浏览器厂商前缀，写起来异常蛋疼，不过没关系，用Emmet写CSS3属性会自动添加前缀，比如输入trs 会展开为：

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

属性值 Emmet支持自动扩展属性值单位，比如 w100 展开以后是width: 100px; ，当然不仅仅支持像素，还支持%和em：

w10 -> width:10px;w10p -> width:10%;w1.5e -> width:1.5em

看到这里想必你已跃跃欲试，如本文开头所说，Emmet的编辑器插件已经覆盖到Mac和Windows下的几款主流编辑器，不妨今天就装一个试试。

详细的语法参考手册，有兴趣的同学可以到这里查看：。

参考资料

本站文章均由远尘原创，转载请注明：

转载自，本文链接地址:

你可能感兴趣的文章