Zen Coding && Emmet-Sublime 安装

Sublime Text 插件之:Emmet,旧版称:ex-Zen Coding 更名之后增加了CSS3和HTML5许多新特性。项目地址也从 code.google 移 github. octocat

安装:

  • Package 方式就不再赘述了(如何安装请移步:安装package
  • 安装了 控制包后搜索 Emmet 即可
手动安装
  1. 下载 Emmet Sublime ,的github项目地址 emmet;你可以 clone 或者直接 下载gift
  2. 文件夹手动安装 ,下载完成后打开 Preferences > Browse Packages 直接放入文件夹 emmet-sublime-master,重启 ST 菜单栏 Preferences > Package Settings > emmet 已经出现,没有?那就没办法了……
  3. 下载安装 PyV8 Binaries ,注意你的操作系统,由于 git下载源不稳定 楼主特地整理了各个操作系统的 V8 : 移步 百度网盘gift

安装方式 同第2步 放入文件夹 PyV8 选择自己操作系统相对应的 V8 再放入 PyV8 文件夹中 比如 pyv8-win64 ,然后 重启下 ST

github V8项目最新版下载地址: PyV8 download

4.尝试一下 html:5 Ctrl+e 看看发生了什么(当然Tab也可以)
在敲一个 div.test.wrap>ul#nav>li.item$*4>a{Item $} 开心吧!难过?那就没办法了~

  • 注:在未装 Emmet 前 ST 支持

比如: div.wrapTab 后输出

<div class="wrap"></div>

但是: div.wrap.testTab 后输出

div<wrap>test</wrap>

安装成功 Emmet 后输出

<div class="wrap test"></div>

那么 div.test.wrap>ul#nav>li.item$*4>a{Item $} 还需要解释么,和css的写法基本类似吧, *4 自然是重复 4 次, {Item $} 表示 a 标签中的 内容

具体可以参考 Emmet 官网

E
元素名(div、p);
E#id
带Id的元素(div#content、p#intro、span#error);
E.class
带class的的元素(div.header、p.error),id和class可以连着写,div#content.column
E>N
子元素(div>p、div#footer>p>span)
EN
多项元素(ul#nav>li
5>a)
E+N
多项元素
E$*N
带序号的元素

结果欣赏

posted @ 2014-12-30 15:51  highsea  阅读(373)  评论(0编辑  收藏  举报