使用仿層疊樣式表選擇器的語法來快速開發(fā)HTML和CSS ——由Sergey Chikuyonok開發(fā)。
Zen Coding由兩個(gè)核心組件組成：一個(gè)縮寫擴(kuò)展器(縮寫為像CSS一樣的選擇器)和上下文無關(guān)的HTML標(biāo)簽對(duì)匹配器。
展開縮寫
展開縮寫功能將類似CSS的選擇器轉(zhuǎn)換為XHTML代碼。術(shù)語“縮寫”可能會(huì)有點(diǎn)兒難以理解。為什么不直接稱之為“CSS選擇器”呢？嗯，首要原因是語義化：“選擇器”意為選擇一些東西，但是在這里我們事實(shí)上是生成 一些東西，是寫一個(gè)長(zhǎng)代碼的較短的替代。其次，它只是使用真實(shí)的層疊樣式表選擇器語法的一個(gè)小的子集，并添加了一些新的操作符。
這里是一個(gè)支持的屬性和操作符的列表：
E元素名稱(div, p);E#id使用id的元素(div#content, p#intro, span#error);E.class使用類的元素(div.header, p.error.critial). 你也可以聯(lián)合使用class和idID: div#content.column.width;E>N子代元素(div>p, div#footer>p>span);E+N兄弟元素(h1+p, div#header+div#content+div#footer);E*N元素倍增(ul#nav>li*5>a);E$*N條目編號(hào) (ul#nav>li.item-$*5);正如你能看到的，你已經(jīng)知道如何使用Zen Coding了：只是些一個(gè)簡(jiǎn)單的仿層疊樣式表選擇器。
元素類型Zen Coding有兩個(gè)主要的元素類型： “片段(snippets)”和“縮寫(abbreviations)”。片段就是隨意的代碼碎片，而縮寫是標(biāo)簽定義。通過片段，你可以寫出你想要的任何代碼，它也會(huì)照你寫的格式輸出；但是你必須手動(dòng)的格式化它(使用\n 和\t實(shí)現(xiàn)換行和縮進(jìn)) 并將${child}變量放到你想要輸出子元素的地方，就像這樣：cc:ie6>style。如果你不使用${child}變量，子元素將會(huì)輸出于代碼片段的 后面。
有了縮寫，您必須編寫標(biāo)記定義，而且語法是非常重要的。通常，你必須寫一個(gè)簡(jiǎn)單的帶有所有默認(rèn)的屬性的標(biāo)簽，比如: 。當(dāng)Zen Coding被加載后，它會(huì)解析一個(gè)標(biāo)簽定義到一個(gè)描述該標(biāo)簽的名字、屬性(包括它們的順序)以及該標(biāo)簽是否為空的特定的對(duì)象中。所以，如果你寫，你會(huì)告訴Zen Coding這個(gè)標(biāo)簽必須是空的，然后“擴(kuò)展縮寫”行為就會(huì)在輸出之前為它使用特定的規(guī)則。
對(duì)于片段和縮寫，你可以添加一個(gè)管道符號(hào)，它告訴Zen Coding當(dāng)縮寫被展開的時(shí)候光標(biāo)會(huì)被定位到哪里。默認(rèn)的，Zen Coding 將光標(biāo)放在空屬性的引號(hào)中間以及開始和關(guān)閉標(biāo)簽的中間。
縮寫包裹
這真的是一個(gè)很酷的特性，它將縮寫和標(biāo)簽對(duì)匹配器的功能合并到一起了。你有多少才發(fā)現(xiàn)你需要 添加一個(gè)包裹元素以修正一個(gè)瀏覽器bug？或者你需要添加一個(gè)裝飾，比如一個(gè)背景圖片或者邊框到一個(gè)塊級(jí)內(nèi)容？你必須寫開始標(biāo)簽，臨時(shí)打斷你的代碼，找到相關(guān)的點(diǎn)然后關(guān)閉標(biāo)簽。這就是“使用縮寫包裹”能幫助你的地方。
該功能相當(dāng)簡(jiǎn)單：它要求你輸入縮寫，然后執(zhí)行適當(dāng)?shù)摹罢归_縮寫”行動(dòng)并將你期望的文本放到你縮寫的最后一個(gè)元素里面。如果你沒有選擇任何文本，它就會(huì)啟動(dòng)標(biāo)簽對(duì)匹配器并使用結(jié)果。它同樣能搞清楚你的光標(biāo)的位置：標(biāo)簽的內(nèi)容里面或者是開始和關(guān)閉標(biāo)簽中間。依賴于它的位置，它會(huì)包裹標(biāo)簽的內(nèi)容或標(biāo)簽本身。
縮寫包裹為包裹個(gè)別行引入了一個(gè)特定的縮寫句法。簡(jiǎn)單跳轉(zhuǎn)到倍增操作符后面的數(shù)字，比如：ul#nav>li*>a。當(dāng)Zen Coding 發(fā)現(xiàn)一個(gè)使用未定義的倍增數(shù)的時(shí)候，它會(huì)將它作為一個(gè)重復(fù)元素：你的章節(jié)中有多少行，它就會(huì)輸出多少次，并將每行的內(nèi)容放到重復(fù)元素的最后一個(gè)子元素里面。
編輯器
Zen Coding并不依賴某個(gè)特定的編輯器。它是一個(gè)只處理文本的出色的組件：它獲取文本、做一些處理并放回新的文本(或索引，用于標(biāo)簽匹配)。Zen Coding由ECMAScript和Python編寫，所以它實(shí)際上可以運(yùn)行于任何平臺(tái)。在Windows，你可以運(yùn)行JavaScript版本，而麥金塔和Linux 分支可以使用Python版。
如果讓你的編輯器支持Zen Coding，你需要寫一個(gè)特定的可以在你的編輯器和Zen Coding之間轉(zhuǎn)換數(shù)據(jù)的插件。問題是一個(gè)編輯器可能不會(huì)完整的支持Zen Coding因?yàn)樗旧淼牟寮到y(tǒng)。比如，TextMate通過使用腳本輸出替換當(dāng)前行很容的就支持了“展開縮寫”功能，但是它不能處理標(biāo)簽對(duì)匹配因?yàn)闆]有標(biāo)準(zhǔn)的方法請(qǐng)求TextMate來選擇內(nèi)容。
編寫實(shí)例
層疊樣式表縮寫形式：
div#page>div.logo+ul#navigation>li*5>a
應(yīng)用于網(wǎng)頁HTML的樣式：
目前 Zen Coding 已經(jīng)更名為 Emmet。更名之后，據(jù)說 Emmet 開始團(tuán)隊(duì)模式，增加CSS3和html5許多新特性。項(xiàng)目地址從 code.谷歌 移 GitHub
參考資料 >
emmetio.GitHub.2013-01-08