Sublime Text Emmet插件高级使用不完全指南

原文地址：http://www.16code.com/sublime-text-emmet/

大家都知道Sublime有一款插件叫做 Zen Coding，不过现在已经改名为Emmet单看名字你可能大概就明白是干嘛的！此乃前端代码编写神器,不可多得的Sublime插件，如果你没有用它那么我觉得多多少少有些遗憾!

为什么要用Emmet

众所周知写HTML和CSS需要一定的时间,那些标签、属性、引用以及其他...当然现在大多数编辑器中都具备自动完成功能，但是你任然需完成要大量的输入，Emmet插件就为我们扩展了大量的HTML以及CSS片段我们仅仅需要录入简短的代码就可以完成复杂的代码结构,从而简化我们的工作！

开始准备好你的编辑器,和我一起来玩转Emmet!

编写一个新的网页框架

开始使用新的HTML文件需要不到一秒钟了，只要输入！或HTML:5在按一下Tab键，你会看到一个赞新的HTML5网页结构罗列在你眼前。

当然也许你还不太喜欢用HTML5，那么还有以下标签供你使用：

• HTML:5或!为HTML5 doctype
• HTML:XT 为XHTML 过渡的doctype
• HTML:4S 为HTML4 严格的doctype

轻松为标签添加CLASS或ID以及文本内容

使用Emmet 能够轻松的为标签添加类以及ID还有文本等东西,比如 p.16code或p#16code

此外你还可以使用元素组合标签来完成,比如下边我们同时为元素加上class和id，比如p.16code#16code就会做如下输出：

 
 
<p class="16code" id="16code"></p>

我们继续为P标签插入内容 p.16code#16code{一流前端欢迎你!}:

 
 
<p class="16code" id="16code">一流前端欢迎你!</p>

添加一个空白链接和带内容的连接 a[href=#] 生成如下内容：

 
 
<a href="#"></a> 

添加一个空白链接和带内容的连接 a[href=#]+a[href=#]{你好,我是内容!}

 
 
<a href="#"></a><a href="#">你好,我是内容!</a>

标签嵌套功能

我们使用+创建同级元素, 使用>创建一个具有父子关系的元素 ^ 追加一个同级元素 比如H1+H2以及p>span^p

 
 
<H1></H1>
<H2></H2>
<!-- // -->
<p><span></span></p>
<p></p>

标签分组功能

为了在有限的时间编写出更多的代码，我们使用分组功能就比如这样 (.foo>h1)+(.bar>h2)

 
 
<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

隐藏式标签

要声明一个类的标签，只需键入div.item，然后它会产生<div class="item"></div> 
在以前的版本可能需要你写上完整的标签,但是在新版本中标签更加智能,以下是隐藏式标签列表

• li:为ul和ol
• tr:为table，tbody，thead 和 tfoot
• td:为tr
• option:为select 和 optgroup

一次性创建多个标签 乘法功能

乘法可以一次性创建多个相同标签, 举例说明 如果我们要创建一个无需列表其中有3个li ul>li*3

 
 
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

给标签编号

给标签编号只需要在标签前面加上 $ 例如 ul>li.item$*3

 
 
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

试试看,你记住了多少？

▶ 播放演示 亲自试试

1

▶播放演示

Emmet CSS使用技巧 -- CSS缩写功能

Emmet 不仅在HTML上有强大的功能CSS上也毫不逊色! 比如说我要定义一个宽度 w100 就完成了 so easy!

 
 
width: 100px;

如果仅仅是会定义宽度,那也太那啥,咱们骑驴看唱本接着瞧！

加入我们需要设置元素的 高为10% margin为5em h10p+m5e

 
 
height: 10%; margin: 5em;

这里你需要注意几个单位: p → % e → em x → ex

快速创建font-face

你已经知道许多直观的缩写代码，如@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 模糊搜索功能

ov:h ,ov-h ,ovh ,乃至于 oh 他们产生的都是相同效果:

还有一些常见属性，比如:mt => margin-top: ; pt => padding-top: ;我想你要是没有我笨应该注意到它们的共同特征了 首字母+属性值,你不相信？那我们再试试 bb = 》border-bottom: ;

Emmet 补足浏览器私有前缀

对，你没看错它就有这么强大！CSS3真心不错可各个浏览器对它的解析不一样都有一套各自的标准真让人痛苦，好了现在Emmet有它们的缩写了 如 trs

 
 
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

你还可以添加其它任意前缀 如： -super-foo

 
 
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

神马，私有前缀太占容量，和你一样我也这么认为所以我一般青睐于webkit和moz那我就自定义一下 -wm-trf

 
 
-webkit-transform: ;
-moz-transform: ;
transform: ; 

私有前缀说明 w-webkit- ,m-moz- ,s-ms- ,o-o-

css3固然好，但是属性有很多，我笨又记不住全名怎么办，没关系我们只需要记住其特征就行比如我要设置一个渐变背景lg(left, #fff 50%, #000)

 
 
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

试试看吧,输入属性值在按Tab键

Emmet For Sublime Text 使用方法不完全指南到此结束,谢谢观看！