Emmet（zen coding）文档（一）[译文]

Emmet其实就是原先的zen coding。我一直想好好深入学习呢，sublime我都配好了。今天抽空翻译下官方文档吧。主要还是举例，翻译有删减，但力求正确。

依照官方文档的类别划分为：

• Abbreviations（缩写）
• CSS Abbreviations（css 缩写）
• Actions
• Filters
• Customization （个性定制）

好了，下面细细讲讲每个部分的内容。

缩略词

缩略词语法

Emmet使用的语法类似于css选择器，比如我们常见的">","+",以及属性选择器等等。这些将在Emmet中变得很常见。

元素

元素是啥？就是有内容的html标签。当然，这些称谓总是让人觉得麻烦（楼主自己插的话）。

你没必要再像以前那样在编辑器中完整地输入元素，比如，你可以这么简写，Emmet可以帮你转化成

你需要的标签：div → <div></div>, foo → <foo></foo>等等。

操作符的嵌套规则：

假如你熟悉css的选择器，那么下面这些示例对你来说，非常容易理解：

子选择器：>

输入:

div>ul>li

就会生成：

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

紧邻选择器：+

输入：

div+p+bq

生成：

<div></div>
<p></p>
<blockquote></blockquote>

上三角符：^

你知道：

div+div>p>span+em 

会被转化成：

<div></div>
<div>
    <p><span></span><em></em></p>
</div>

那么使用“^”符号呢，你就可以跳到上一级。这个上一级是啥意思捏，我的理解是上一个“>”选择器的那一级。

示例：

div+div>p>span+em^bq

输出为：

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

当然，你也可以使用多个“^”，如下：

div+div>p>span+em^^^bq

将会输出为：

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

PS：这个示例，有点误导啊，其实如果为了这个结果，只需要两个“^”就OK了，三个多余了。

请猜测，这个输入会输出什么结果呢？

div.test>span+(em>i)+^bq

分组：（）

上面给出的一个猜测结果的例子就使用了分组，如果不用分组的话，转化结果就错误咯。

括号（）通常用来在复杂的缩写中对子节点树进行分组：

div>(header>ul>li*2>a)+footer>p

扩展为：

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

If you’re working with browser’s DOM, you may think of groups as Document Fragments: each group contains abbreviation subtree and all the following elements are inserted at the same level as the first element of group.(尼玛，这段话真长，我都不知道怎么翻译了。)

你可以使用（）分组，并使用*来把分组连接起来：

(div>dl>(dt+dd)*3)+footer>p

生成为：

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

With groups, you can literally write full page mark-up with a single abbreviation, but please don’t do that.（使用分组，你可以只用一个单独的缩完成整个页面的标记，但是不建议这么做）

属性操作符：

ID 和CLASS

这个很简单啊，我就不翻译他们的啰嗦话了，直接上代码示例：

div#header+div.page+div#footer.class1.class2.class3

输出：

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

属性：

td[title="Hello world!" colspan=3]

输出：

<td title="Hello world!" colspan="3"></td>

属性值其实还可以写单引号，也可以不用写。html5就是这样的规范。属性值为空的话，就不写属性值了。

Item numbering(项目序号，列表项序号):$

使用*可以重复元素，那么使用$则可以给它们编号。把$符放在元素名称，属性名称或者属性值后，输出重复元素的当前编号。

ul>li.item$*5

输出：

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

你也可以使用多个$，相当于给数字前缀加0。

ul>li.item$$$*5

输出为：

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

更改编号的基数和方向（排序）：

使用@修饰符，表示默认升序（不用它，只用$也是默认升序），@-则表示降序，@修饰符要跟在$符后面，基数默认为1：

ul>li.item$@-*5

转化为：

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

若是要改变基数，就直接在@后面加上基数数字即可，但是基数数字是要在升降序修饰符后面的（升序默认没有，降序为“-”）。例如：

ul>li.item$@3*5

生成：

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

看吧，基数是从3开始的，默认升序。对应的，降序的例子为：

ul>li.item$@-3*5

生成：

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

文本: {}

元素一般既包括了属性和属性值，还包括了文本内容。文本内容怎么填充呢？

答案就是使用 { }。

a{Click me}

生成：

<a href="">Click me</a>

注意， {text}被用来解析为一个单独的元素（就好比，div，p），当把它卸载元素后面是，有特殊含义。比如，a{text}和a>{text}将会产生同样的输出，但是a{click}+b{here}和a>{click}+b{here}就不一样了。


<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

所以，尼玛还是规矩点写吧，想输出<a href="">text</a>就用a{text}，别发骚，脱裤子放屁用a>{text}。

好了，为了加深理解，我们不用">"操作符，来看看下面这个例子：

p{Click }+a{here}+{ to continue}

生成：

<p>Click </p>
<a href="">here</a> to continue

缩写注意事项：

有些人为了让自己的缩写变得更具有可读性，就给元素和操作符之间加了空格，比如：

(header > ul.nav > li*5) + footer

结果，尼玛悲催了，不起作用啊。因为空格符在Emmet中被当做停止符来解析的。

还有些二货用户呢，错误地以为，每个缩写应当换行，额，你爱写哪里写哪里！

下面是视频demo，我就不管啦。

• 缩写并不是模板语言，所以不具有可读性，它们可以迅速扩展和移除
• 你没必要去写复杂的缩写。你有那功夫去思考，时间都特码浪费好多了

------------------华丽丽的分割线-----------------------

好了，今天先翻译到这里。

题外话：

确实啊，谁会一下子就写出一个复杂的缩写呢？我也是一段一段的写啊。看一眼psd，就特码能写出牛逼闪闪，可扩展，语义也很不错的代码，不容易啊！