讓ZenCoding提升編碼速度

日前寫了一篇關於VS神級插件Web Essentials的系列博客，其中在HTML&CSS操作技巧一節簡單提到了ZenCoding，今天來詳細說一下這個東西。

摘要

Zen Coding是一種使用CSS樣式選擇器語法更快速地編寫HTML的方式。如果你使用的是VS，那么你可以安裝了VS的插件Web Essentials之后，就可以使用Zen Coding編碼方式了，關於Web Essentials的下載，請轉到這里。如果你是用的其他編輯器，請到這里下載安裝（需要FanQiang）。Zen Coding是2009年提出來的，已經更新了多次，正在變成更加有效地編寫無聊的HTML受人歡迎的方式。

快速指南

下面是一些常用的Zen Coding功能，目前VS2013的Web Essentials插件已經支持。

• '#' 創建一個id特性
• '.' 創建一個類特性
• '[]' 創建一個自定義特性
• '>' 創建一個子元素
• '+' 創建一個兄弟元素
• '^' 提升元素層次
• '*' 相當於乘號，會創建n次相同的東西。
• '$' 代替一個自增的數字。
• '$$' 用於有填充位的數字，比如00，01。
• '{}' 創建元素的文本。

可以做些啥呢？看下面這個復雜的例子：
div#olDiv>ol>li.item*6>span{ZenCoding$$}.red
按下Tab鍵后，它會生成下面的代碼：

<div id="olDiv">
    <ol>
        <li class="item">
            <span class="red">ZenCoding01</span>
        </li>
        <li class="item">
            <span class="red">ZenCoding02</span>
        </li>
        <li class="item">
            <span class="red">ZenCoding03</span>
        </li>
        <li class="item">
            <span class="red">ZenCoding04</span>
        </li>
        <li class="item">
            <span class="red">ZenCoding05</span>
        </li>
        <li class="item">
            <span class="red">ZenCoding06</span>
        </li>
    </ol>
</div>

ID和Class特性：#和.

使用CSS樣式語法可以創建一個元素，並給它賦予id或class特性。
div#container.layout會生成下面的代碼：

<div id="container" class="layout"></div>

自定義特性：[]

可以使用中括號[]創建任何特性。
div[title]會生成下面的代碼：

<div title=""></div>

也可以創建多個特性並給特性賦值：
input[placeholder="請輸入姓名" type="text"]會生成下面的代碼：

<input type="text" value="" placeholder="請輸入姓名" />

子元素：>

先要創建一個元素，然后才能創建它的子元素。
比如，form#loginForm.login>input[type="text"]會生成下面的代碼：

<form id="loginForm" class="login">
      <input type="text" value="" />
 </form>

兄弟元素:+

使用Zen Coding可以很輕松地創建兄弟元素。
footer>div>a+input可以生成下面的代碼：

<footer>
    <div>
        <a href=""></a>
        <input type="" value="" />
    </div>
</footer>

提升元素層次：^

>符號會降低元素的層次，然而^符號的作用相反，它是用來提升元素的層次的，而且還可以提升多個級別。比如，1^{可以提升一個級別，4}可以提升4個級別。該功能不常用。

如footer>div>a+input^^p，p標簽要在input級別的基礎上提升2個層次，這樣p標簽就和最外層的footer標簽處於同一級別，所以，生成的代碼如下：

<footer>
    <div>
        <a href=""></a>
        <input type="" value="" />
    </div>
</footer>
<p></p>

乘積：*

創建n個同樣的元素。
如ul>li*6會生成下面的代碼：

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

元素序號：$

當使用乘積*創建n個同樣的元素時，可以使用$給它們添加一個自增的數字。注意：使用多個$操作符（如$$）會創建使用多個0填充的數字。
如ul>li#id$$$*4會生成下面的代碼：

<ul>
    <li id="id001"></li>
    <li id="id002"></li>
    <li id="id003"></li>
    <li id="id004"></li>
</ul>

元素中的文本：{}

要給元素輸入文本時，可以使用{}符號。
如ul>li*10>span{Windows $}會生成以下代碼：

<ul>
    <li>
        <span>Windows 1</span>
    </li>
    <li>
        <span>Windows 2</span>
    </li>
    <li>
        <span>Windows 3</span>
    </li>
    <li>
        <span>Windows 4</span>
    </li>
    <li>
        <span>Windows 5</span>
    </li>
    <li>
        <span>Windows 6</span>
    </li>
    <li>
        <span>Windows 7</span>
    </li>
    <li>
        <span>Windows 8</span>
    </li>
    <li>
        <span>Windows 9</span>
    </li>
    <li>
        <span>Windows 10</span>
    </li>
</ul>

聯合所有的符號

聯合多個功能可以更快地編寫一些相當酷的HTML，甚至可以為模板創建一些Knockout.js的綁定，然后只需要改變屬性名就行了。

例如section[data-bind="foreach:customers"]>div*4>input[type="text" data-bind="text:$$"]會生成下面的代碼：

<section data-bind="foreach:customers">
    <div>
        <input type="text" value="" data-bind="text:01" /></div>
    <div>
        <input type="text" value="" data-bind="text:02" /></div>
    <div>
        <input type="text" value="" data-bind="text:03" /></div>
    <div>
        <input type="text" value="" data-bind="text:04" /></div>
</section>

組合：()

組合是Zen Coding中強大的功能，它可以創建復雜的表達式。
例如 div>(header>div)+section>(ul>li*2>a)+footer>(div>span)可以生成下面的代碼：

	<div>
        <header>
            <div></div>
        </header>
        <section>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
            <footer>
                <div>
                    <span></span>
                </div>
            </footer>
        </section>
    </div>

補充

如果你還想了解更多的快捷語法，請下載這個表單文件（需要FanQiang）。