Sublime Text外掛程式之Emmet

標籤：

轉載：http://www.w3cplus.com/tools/using-emmet-speed-front-end-web-development.html

Emmet外掛程式以前被稱作為Zen Coding，是一個文字編輯器的外掛程式，它可以協助您快速編寫HTML和CSS代碼，從而加速Web前端開發。早在2009年，Sergey Chikuyonok寫過一篇文章，提出編寫HTML和CSS的新方法。這一革命性的外掛程式指的就是Zen Coding，經過很多開發人員多年來的努力與協助，現在已達到了一個新的水平。也就是今天所說的Emme外掛程式。

在這篇文章中，我們將要學習如何使用Emmet文法來產生HTML和CSS代碼。

 安裝Emmet外掛程式

Emmet只是文字編輯器一個外掛程式，要想讓他發揮應用的功能，就得將其安裝到你喜歡的文字編輯器中。到目前為止，很多流行的文字編輯器都支援Emmet外掛程式，也就是說很多流行的文字編輯器都可以安裝這款外掛程式。

點擊下面的連結，按照說明文檔可以給對應的文字編輯器安裝Emmet外掛程式：

•  Sublime Text
•  Eclipse
•  TextMate
•  Coda
•  Espresso
•  Chocolat
•  Notepad++
•  Brackets
•  NetBeans
•  Adobe Dreamweaver

它是如何工作的？

在Web前端開發中，我們不得不面對一個殘酷的現實。在寫HTML代碼時需要一定的時間，因為我們要花大把的時間寫HTML標籤，屬性，引號等；同樣在編寫CSS時，我們要寫很多的屬性、屬性值，大括弧和分號等。當然，大多數的文字編輯器都或多或少帶有代碼自動提示功能，在開發之時，幫了很大的忙，但仍然需要人工輸入很多代碼。而Emmet外掛程式，整合了很多縮寫，大家在開發時只需要輸入簡單的縮寫，按tab鍵或ctrl+E鍵就能擴充出所需的程式碼片段。

Emmet和HTML

假定你已經為您自己喜歡的文字編輯器成功的安裝好了Emmet外掛程式，接下來我們來簡單的看看如何使用Emmet協助您快速編寫您的HTML標籤。

Emmet使用定義的縮寫來產生元素。他的文法和CSS的選取器非常類似： ul>li>img+p 

一旦你寫好縮寫之後，按一下tab鍵(我使用的是Sublime Text編輯器)就能產生你所請求的代碼。上面的例子將會產生下面的代碼：

<ul>    <li>        <img src="" alt="">        <p></p>    </li></ul>

早前在《前端開發必備！Emmet使用手冊》一文中詳列了Emmet產生HTML代碼的一些程式碼範例。接下來，讓我們來深入一點瞭解Emmet文法，來看看如何通過一些更複雜的縮寫建立HTML標籤。

建立初始文檔

任何一個HTML檔案，都具有一些預設的文檔結構。使用Emmet來建立需要的時間不到一秒。只要輸入!或html:5，然後點擊tab鍵，你就會看到一個HTML5的doctype預設標籤。

•  html:5或!：HTML5文件類型
•  html:xt：XHTML過渡型文件類型
•  html:xs：XHTML嚴格型文件類型
•  html:4t：HTML4過渡型文件類型
•  html:4s：HTML4嚴格型文件類型

子項目 >

使用>運算子可以用來產生彼此嵌套的元素：

 section>div>p 

上面的代碼會產生下面的代碼：

<section>    <div>        <p></p>    </div></section>

相鄰元素 +

使用+運算子可以用來產生彼此相鄰的元素：

 section+div+p 

上面代碼會產生下面的代碼：

<section></section><div></div><p></p>

返回上一層 ^

使用^運算子，可以讓你的代碼返回上一層。當你使用>嵌套元素時，想讓後面的回到上一層，那麼這個方法很適用。

 section>div>p>a^p 

這個縮寫將兩個段落元素都放置在div內，但只有第一個段落裡會包含一個連結。

<section>    <div>        <p><a href=""></a></p>        <p></p>    </div></section>

其實這個就相當於：

 section>div>(p>a)+p 

乘法 *

如果你想一次性產生多個相同的元素，比如列表中的li，那麼就可以使用乘法運算子*:

 ul>li*5 

上面代碼會產生不個li：

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

除了能一次性產生多個相同的標籤之外，我們還可以通過$符號做遞增；通過[email protected]符號做遞減；通過[email protected]*5這樣的方式從第三個開始命名：

組合

為了更有效利用嵌套，我們常會製作一些程式碼片段。在Emmet中你可以通過()將一個塊組合在一起，來看一個簡單的樣本：

 ul>(li>a)*3 

上面的代碼就會產生3個li，而且每個li中套了一個a:

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

在我們一個頁面中，常會包括頁頭、主體和頁尾三個部分，我們很多時候就可以通過對全們進行一個組合，快速產生有效代碼：

快速添加類名、ID、文本和屬性

在Emmet中，還有一個功效，能快速協助你添加類名、ID、文本和屬性。

•  使用E#ID添加ID名
•  使用E.class添加類名
•  使用E[attr]添加屬性
•  使用E{text}添加文本

省略標籤名

在Emmet中可以省略標籤名，預設情況下，如.item和div.item起到的作用是一致的<div class="item"></div>。在實際中還有幾種情況：

•  ul和 ol中輸入指的是li
•  table、tbody、thead和tfoot指的是tr
•  tr中指的是td
•  select和optgroup指的是option

Emmet和HTML更詳盡的介紹可以閱讀：Matt West的《Using Emmet to Speed Up Front-End Web Development》、Zeno Rocha的《Goodbye, Zen Coding. Hello, Emmet!》和白牙的《前端開發必備！Emmet使用手冊》

Emmet和CSS

很多文章都是介紹Emmet和HTML之間的實現方式，但Josh Medeski的《Turbo-Charge Your CSS With Emmet》一文詳細介紹了Emmet和CSS之間的實現方式。接下來的代碼和圖片主要來自於此文章。

屬性

CSS提供了屬性的值，比如font-size，margin和 padding等等：

Emmet定義了所有已知的CSS屬性和縮寫。所以border-bottom縮寫是bdb，border-top縮寫是bdt。正如下面的樣本font-size縮寫是fz：

假設你在你的編輯器中輸入fz，然後按一下tab鍵，Emmet就像一個魔法師一樣將縮寫變成有效CSS，並且放在你的游標之處。

屬性值

現在我們已經瞭解了CSS的屬性，它只需要添加一個值。這是通過一個組合縮寫和所需要的值一起來完成。例如，fz18將輸出font-size:18px。你不需要輸入px，因為Emmet將會其單位是px。如果一個項目沒有一個單位（如font-weight），Emmet會很聰明，他不會添加像素單位。

單位

如果你在CSS不經常使用的像素(px)單位，那會是什嗎？是em、rem、%、ex和px嗎？那麼這些單位在Emmet中都是可以使用的。在Emmet中每一個單位都有其縮寫形式：

•  px→ 預設
•  p→ %
•  e→ em
•  r→ rem
•  x→ ex

要使用一個單位，只需要在值的後面使用縮寫的單位值。下面的例子是使用em定義font-size：

多個單位

CSS中的某些屬笥，比如margin，允許多個值。在Emmet中要做到這一點，只需要每個值之間使用破折號(-)。來看看下面的例子，給body定義margin的四個值：

顏色

在Emmet中使用#首碼，後面緊跟顏色值，但不同的字元數將會輸出不同的十六進位代碼。來看一些例子：

•  ＃1→ ＃111111
•  ＃E0→ ＃e0e0e0
•  ＃FC0→ ＃FFCC00

下面定義通過c#2定義body的顏色值，將會輸出#222：

!important

儘管在CSS中!important並不經常使用，但在Emmet也帶有一定的縮寫。添加!就可以自動產生：

多屬性

現在我們具Emmet的CSS特性的一個基本瞭解，也是將它們放在一起的時候。就類似於Emmet和HTML中的相鄰元素的功能。可以使用加號+運算子來建立多個屬性。我們來看一個簡單的樣本：

樣本

記住，你可以使用所有縮寫或者將其分開。這並不是很重要，關鍵的是你要使用得正確，它能更容易讓你編寫你的CSS。這裡有一個動畫，他給div.panel建立一些樣式：

以上範例程式碼與示範圖來自於Josh Medeski的《Turbo-Charge Your CSS With Emmet》一文。

總結

Emmet是一個強大的工具，也被稱為是一款高速的編碼工具，它可以讓你花更少的時間做同樣的事情，而無需手動建立自己的程式碼片段。Emmet的靈感來自於CSS選取器以及可以用於所有主要的文字編輯器，以適應開發人員的工作流程。

請記住，你可以在你的工作流程中添加任何新工具，這個學習過程也是一個曲線的過程，但你不要花費更多的時間做那些相同的事情。你只是需要週期性訪問 Emmet文檔，你就會慢慢熟悉Emmet中HTML和CSS的所有特性。讓你少想，少寫，實現更多想要的代碼。

PS：（1）Sublime外掛程式的安裝方法：http://www.cnblogs.com/bananaplan/p/Sublime-Text-3-Powerful.html

　　（2）Sublime Text3的使用心得：https://github.com/jikeytang/sublime-text

Sublime Text外掛程式之Emmet