Zen Coding更名Emmet-功能更智能化

早在2009年，謝爾蓋Chikuyonok寫了一篇文章，提出了一種新的編寫HTML和CSS代碼的方式。這一革命性的插件，被稱爲zen coding，多年來已幫助許多開發人員，如今已達到一個新的水平。

Emmet，之前被稱爲zen coding，或許是你見過的最有效率和節省時間的文本編輯器插件。Emmet經過簡單的縮寫瞬間擴大到複雜的代碼片斷，能夠把你變成一個更高效的開發者。

這裏是我總結的最喜歡的技巧，獻給那些喜歡閱讀的朋友。

它是如何工做的?

讓咱們面對它：編寫HTML代碼須要必定的時間，全部這些標籤、屬性、引號、括號等等，固然，大多數文本編輯器的代碼均可以實現的，有很大幫助，但你仍是作了不少的打字。Emmet瞬間將複雜的代碼片斷擴展到簡單的縮寫。

HTML縮略語

初始化

建立一個新的HTML文檔只須要不到一秒鐘。只需鍵入!或HTML 5，按「tab鍵」展開編輯器的一些標籤，你會看到一個HTML5 doctype。

html:5 或者 ! 建立一個html5文檔

html:xt 建立xhtml transitional文檔

html:4s 建立 HTML4 strict doctype

輕鬆添加class，標識，文本和屬性

由於Emmet用於描述元素的語法相似CSS選擇器，使用它是很容易的。嘗試混合元素的名稱(如p)的標識符(例如p#description)。

此外，您還能夠結合類和ID。例如p.bar#foo輸出：

如今，讓咱們來看看如何定義你的HTML元素的內容和屬性。使用花括號內表示其內容，H1 {foo}會產生這樣的：

用方括號表示其屬性。因此a[href=#] 輸出

嵌套

經過嵌套的縮寫，你能夠只使用一行代碼創建一個整個頁面。>表示嵌套在前面元素的內部。同級兄弟元素用+表示，^表示返回樹結構的上一個級別，使後面的元素與上一個級別同級。

分組

爲了有效地利用嵌套而且不讓它們變成一個亂七八糟的編碼結構，你就須要組合一些代碼片斷。這就像數學-你只須要使用括號圍繞若干幅。例如，(FOO> H1)+(foo> H2)將輸出：

隱式標籤名稱

在過去，要輸出一類的標籤，只需鍵入div.item，那麼就會產生以下圖片的效果。Emmet只需輸入.item便可生成，你能夠省略一個div標記名稱，Emmet更加智能化。它能夠用父標籤名稱每次展開一個隱含的名稱縮寫。

乘法

您可使用*運算符定義元素應該被輸出多少次。所以，UL> LI * 3會產生：

編號

混合乘法功能與一些項目編號是什麼?只要將操做元素的名稱，屬性名稱或屬性的值輸出目前重複的元素的數量。若是你寫輸入ul> li.item的$ * 3，將輸出：

Emmet HTML縮寫在線測試工具-(Zen coding)，按tab鍵執行

CSS縮寫

Emmet不單單用於HTML元素縮寫編碼，CSS縮寫能夠直接輸入值，比方你要定義的寬度只需輸入W100，它會產生：width： 100px;

像素不是惟一提供的單位。嘗試運行h10p + M5E，它會輸出：height:10%;margin:5em;

這裏列出幾個單位縮寫：p →% e→EM x→EX

額外的操做

你已經知道@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 CSS模塊使用模糊搜索找到未知的縮寫。因此，每次你輸入一個未知的縮寫，Emmet會試圖找到最接近的片斷定義。例如，OV:h 和OV-H和OVH和OH都是會輸出相同的結果：overflow:hidden; 可是請你們務必以標準縮寫爲規範你的編碼。

瀏覽器兼容前綴

CSS3很強大，但咱們編入全部的這些瀏覽器供應商前綴是一個真正的痛苦。如今不會了Emmet解決了這個問題。例如，trs縮寫將擴大到：

-webkit-transform: ; -MOZ-transform: ; -MS--transform: ; -o-transform: ; -transform: ;

 

您還能夠添加到任何一種元素的前綴。你只須要使用-前綴標識。因此，-super-foo 將擴大到：

-webkit-super-foo: ; -moz-super-foo: ;等

若是你不但願輸出全部這些前綴呢?沒問題。您能夠定義支持哪些瀏覽器。例如，-wm-trf將輸出：

-webkit-transform: ; -MOZ-transform: ; -transform: ;

Emmet瀏覽器前綴縮寫 w 輸出 -webkit- m → -moz- s → -ms- o → -O-

漸變

提及惱人的CSS3特性，咱們不能忘記梯度。那些長期用不一樣的符號定義如今能夠很容易地更換爲簡潔的縮寫。如lg(left,#FFF 50%,#000) ，並輸出將是：

參考上面的gif圖片，測試下Emmet CSS縮寫吧，Tab鍵確認輸出。(zen coding在線測試工具)

附加功能 ：請參見原文地址：http://coding.smashingmagazine.com/2013/03/26/goodbye-zen-coding-hello-emmet/#more-125747

本文由紅蜘蛛網絡聯盟(www.rswebun.com)編譯。