Emmet介绍 -- 前端开发工具（前身 Zen Coding）

    Emmet 是什么？在用的同学请跳过此文，没听说过的可以继续...

 

    Zen Coding 就不用我说了吧，之前一直是前端的一个非常使用的工具，支持各种编辑器（DW, Notepad++, Sublime Text等）。（没听说过的同学可以看看 http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html  ）。

    

 

    Zen Coding 就是 Emmet 的 前身。下面是Emmet几个简单的例子。

 

    HTML 

 

    -- Doctype

 

    　　

    

• html:5 或 ! => HTML5 doctype
• html:xt  =>  XHTML transitional doctype
• html:4s  =>  HTML4 strict doctype

 

              -- class、id、attr 等

                    a.link#traget[href=#, target=_blank]{hello}   =>   <a href="#," class="link" id="traget" target="_blank">hello</a>

            

        -- 多个列表

 

                   h3.title{List}+ul.list-1>li.item-$*3     =>        <h3 class="title">List</h3>

  <ul class="list-1">

              <li class="item-1"></li>

    <li class="item-2"></li>

    <li class="item-3"></li>

 </ul>

                             

 

 

 

 

CSS

 

-- 值（单位）

• p → %
• e → em
• x → ex

w100  =>  width: 100px;

h5e    =>   height: 5em;

ml8    =>  margin-left: 8px;

-- 前缀

trf      =>     -webkit-transform: ;

-moz-transform: ;

-ms-transform: ;

-o-transform: ;

transform: ; 

 

 

扩展

 

-- 测试文字

lorem  => 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat maxime culpa explicabo cumque amet placeat tempore natus nulla illo accusamus eaque numquam! Suscipit adipisci reiciendis consequuntur quam beatae quasi architecto. 

 

资料

 

官方主页 ：  http://docs.emmet.io/

速查表    ：  http://docs.emmet.io/cheat-sheet/

 

 

支持编辑器

• Sublime Text 2
• TextMate 1.x
• Eclipse/Aptana
• Coda 1.6 and 2.x
• Espresso
• Notepad++
• PSPad
• <textarea>
• CodeMirror2/3
• Brackets

文章参考资料：

官方主页 ： http://docs.emmet.io/

Smashing Magazine 的一篇文章 ： http://coding.smashingmagazine.com/2013/03/26/goodbye-zen-coding-hello-emmet/ (图片来源)