Emmet实用技巧归纳

CSS

###单位

fz18 -> font-size: 18px ,Emmet默认单位PX。

emmet

px -> default
p -> %
e -> em
r -> rem
x -> ex

emmet

多单位

多单位使用-号连接符

mt10-20-30-40 -> margin: 10px 20px 30px 40px

emmet

颜色

#1 -> #111111
#e0 -> #e0e0e0
#fc0 -> #fc0fc0

c#1 -> color: #111111

emmet

!important

p0! -> padding: 0 !important;

emmet

多属性

多属性使用+号连接符。

mt10+pt30+mb50+mb10 -> 

margin-top: 10px;
padding-top: 30px;
margin-bottom: 50px;
margin-bottom: 10px;

emmet

HTML

Classes

ul.nav.nav-main.nav-static ->

<ul class="nav nav-main nav-static"></ul>

Ids

header#site-header ->

<header id="site-header"></header>

插入文本 使用“{}”,插入属性 使用“[]”

a[href="http://www.apple.com"]{Apple} ->

<a href="http://www.apple.com">Apple</a>

子元素 使用“>”符号链接

nav>ul>li>a ->

<nav>
<ul>
<li>
<a href=""></a>
</li>
</ul>
</nav>

同级元素 使用“+”符号链接

header+.main+foote ->

<header></header>
<div class="main"></div>
<footer></footer>

上一级元素 使用“^”符号链接,再往上一级 使用“^^”,以此类推

header+article>p>str^bg^footer ->

<header></header>
<article>
<p><strong></strong></p>
<blockquote></blockquote>
</article>
<footer></footer>

重复添加元素 使用“*”符号

nav>ul>li*5>a ->

<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>

整合分组 使用“()”符号

(section>.wrap)*2 ->

<section>
<div class="wrap"></div>
</section>
<section>
<div class="wrap"></div>
</section>

自动列表计数 使用$符号

ul>li.item${item $$}*3  ->

<ul>
<li class="item1">item 01</li>
<li class="item2">item 02</li>
<li class="item3">item 03</li>
</ul>

自动列表计数倒序 使用“@-”符号

ul>li.item$$@-*5>a  ->

<ul>
<li class="item05"><a href=""></a></li>
<li class="item04"><a href=""></a></li>
<li class="item03"><a href=""></a></li>
<li class="item02"><a href=""></a></li>
<li class="item01"><a href=""></a></li>
</ul>

自动列表计数指定开始 使用“@N”符号

ul>li.item$@3*5  ->

<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>

快捷键

Ctrl+Alt+J : 快速跳转到对应标签的开头和结尾
matchair

Shift+Ctrl+G or Ctrl+Alt+Enter: 内容嵌套标签
wrap

Shift+Ctrl+/ : 块注释
ToggleComment

Shift+Ctrl+’ : 合并和分解标签

<header></header> -> <header/>

Shift+Ctrl+; : 移除标签

<h2>hello there</h2> -> hello there

emmet

参考文章:
http://dev.tutsplus.com/articles/writing-turbo-charged-css-with-emmet–webdesign-16511
http://www.sitepoint.com/faster-workflow-mastering-emmet-part-4/