Sublime text 2之WIN7下安装Zencoding插件和使用

什么是Zendcoding呢？

它是一个俄国小伙子Sergey Chikuyonok主导编写的Zencoding项目，主要是仿CSS选择器语法来快速码HTML代码。能有多快？

看下面这张图片：

注意图中的Enter Koan部分，就那么几个字符就输出了那么多html代码，怎么样？好玩吧？下面我们就看如何安装。

首先我们需要安装一个插件的安装平台。

A：按快捷键Ctrl+`（注意这个字符，就是数字1左边的那个）弹出console；

B：粘贴以下代码，回车。便安装了一款名为“Package Control”的插件，可以认为这是这个插件是别的插件的安装平台，装别的插件可以通过它来安装；

`1`	`import` `urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)` `if` `not os.path.exists(ipp)` `else` `None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())`

装好，重启Sublime。

平台装好了，就该用它来装插件了。

C：使用快捷键Ctrl+Shift+p，弹出命令行选择器，然后输入install，调出Package Control，在最底下找到Zencoding，点选就安装，装好，重启。

D：随便建个index.html用Sublime打开。

E：关键的地方到了：在windows下，打开Zencoding的快捷键是Ctrl+Alt+Enter！

如下图：

下面我们就来了解下它就如何使用的。

(1)如下图所示，到github里搜索zencoding。

搜索结果：

从搜索结果我们可以看出，zencoding有多种语言扩展和IDE扩展，所以不仅能写HTML和CSS也能写Ruby和PHP等，具体内容请详见图片上的“more >>”。

(2)在上图中点击第一项“sergeche/zen-coding”进入项目页。然后向下翻啊翻，可以看到如下使用说明：

Current features of abbreviation engine:
A.ID and CLASS attributes: div#page.section.main.

B.Custom attributes: div[title], a[title="Hello world" rel], td[colspan=2].

C.Element multiplication: li*5 will output 
tag five times.

D.Item numbering with $ character: li.item$*3 will output 
tag three times, replacing $ character with item number.

E.Multiple ‘$’ characters in a row are used as zero padding, i.e.: li.item$$$ → li.item001

F.Abbreviation groups with unlimited nesting: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You can literally write a full document markup with just a single line.

G.Filters support

H.div tag name can be omitted when writing element starting from ID or CLASS: #content>.section is the same as div#content>div.section.

详细解释：

1)“#”表id，“.”表类，“+”表并列

写完Enter Koan后面的代码后，上面就出现了HTML结构。这个例子可以看出一般的zencoding格式是“HTML标签#xxx”或者“HTML标签.yyy”，而#xxx表示id为xxx，.yyy说明class为yyy。最后“+”表示标签的并列。

小练习1：

1
<div id="header"></div>

2
<div class="content"></div>

3
<div class="sidebar"></div>

4
<div id="footer"></div>

小练习2：

1
<div id="header"></div>

2
<div id="content" class="aticle posts"></div>

3
<div id="sidebar" class="ad"></div>

4
<div id="footer"></div>

2)“>”指子内容

很容易理解，比如写下“div>p>span>a”这个Koan，那么就有这个HTML结构：

1
<div>

2
    <p><span><a href=""></a></span></p>

3
</div>

其中，a标签里的属性href是zencoding智能加入的。总之“>”产生了标签的层级，而且zencoding会自动缩进哦。来接着练习吧。

小练习3：

1
<html>

2
    <head></head>

3
    <body>

4
        <div class="header"></div>

5
        <div class="content"></div>

6
        <div class="footer"></div>

7
    </body>

8
</html>

小练习4：

01
<html>

02
    <head>

03
        <title></title>

04
        <style type="text/css"></style>

05
        <script type="text/javascript"></script>

06
    </head>

07
    <body>

08
        <div class="content">

09
            <div class="nav"></div>

10
            <div class="sidebar"></div>

11
            <div class="main"></div>

12
        </div>

13
        <div class="footer"></div>

14
    </body>

15
</html>

3)“()”指同级范围

参考小练习4的答案相信你会明白的。

4)“[]”表属性

如何完成<h1 title="something"></h1>的属性写法呢，就是用“[]”，即如下Koan：h1[title=someting]。

小练习5：

1
<div id="content">

2
    <div class="aticle">

3
        <h1 class="ok" title="papername" sytle="color:#000;"></h1>

4
        <h3 title="subname" sytle="color:#fff;" class="no"></h3>

5
        <p class="words"></p>

6
    </div>

7
</div>

5)#和.的简写

Koan中：div.ok等同于.ok，div#no等同于#no，所以直接写.或#时，默认为Div标签是也。

小练习6：

用简写法改写练习5。

6)“*”表标签克隆

如果在Koan中写入一下内容：ul>li*5，就会产生以下HTML结构：

1
<ul>

2
<li></li>

3
<li></li>

4
<li></li>

5
<li></li>

6
<li></li>

7
</ul>

那么，如果每个li元素中还存在<a>与<span>呢？

OK，想必大家想明白了*号的用法，继续练习。

7)“{}”表标签内容

你在Koan中写：div>span>h1{这是标题}，自己看看会出现什么吧。

8)“$”表连续数

所以不论在属性如li.li-$或是id或是{}中的内容，$就代表从1开始的序列，就和Excel表一格写一个1，下拉改格拖出2,3,4,5,6的意思一样。

小练习7：

01
<div class="header">

02
    <ul class="nav">

03
        <li><a href="" sytle="block"><span>雪洁之家</span></a></li>

04
        <li><a href="" sytle="block"><span>雪洁之家</span></a></li>

05
        <li><a href="" sytle="block"><span>雪洁之家</span></a></li>

06
        <li><a href="" sytle="block"><span>雪洁之家</span></a></li>

07
        <li><a href="" sytle="block"><span>雪洁之家</span></a></li>

08
        <li><a href="" sytle="block"><span>雪洁之家</span></a></li>

09
    </ul>

10
</div>

小练习8：

01
<table>

02
    <thead>

03
        <td class="col1"></td>

04
        <td class="col2"></td>

05
        <td class="col3"></td>

06
        <td class="col4"></td>

07
    </thead>

08
    <tbody>

09
        <tr class="row01">

10
            <td class="col1"></td>

11
            <td class="col2"></td>

12
            <td class="col3"></td>

13
            <td class="col4"></td>

14
        </tr>

15
        <tr class="row02">

16
            <td class="col1"></td>

17
            <td class="col2"></td>

18
            <td class="col3"></td>

19
            <td class="col4"></td>

20
        </tr>

21
        <tr class="row03">

22
            <td class="col1"></td>

23
            <td class="col2"></td>

24
            <td class="col3"></td>

25
            <td class="col4"></td>

26
        </tr>

27
    </tbody>

28
    <tfoot>

29
        <td></td>

30
        <td></td>

31
        <td></td>

32
        <td></td>

33
    </tfoot>

34
</table>

练习题答案：

练习1：div#header+div.content+div.sidebar+div#footer

练习2：div#header+div#content.aticle.posts+div#sidebar.ad+div#footer

练习3：html>head+body>div.header+div.content+div.footer

练习4：html>(head>title+style+script)+body>(div.content>div.nav+div.sidebar+div.main)+div.footer

练习5：div#content>div.aticle>h1.ok[title=papername sytle=color:#000;]+h3[title=subname][sytle=color:#fff;].no+p.words

（注意：1、id或class与属性的先后位置，是否无关？；2、并列属性的写法，是否很灵活？3、为什么这个例子不用()，而上一个例子必须用呢？）

练习6：#content>.aticle>h1.ok[title=papername sytle=color:#000;]+h3[title=subname][sytle=color:#fff;].no+p.words

练习7：div.header>ul.nav>li*6>a[sytle=block]>span{雪洁之家}

练习8：table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$*4)+tfoot>td*4