Emmet中文文档

最近在一篇博客里面看到了关于emmet的一些快捷键，我忍不住手痒又搜索谷歌“emmet中文文档”，没想到真的有人翻译了，感激啊。这个文档是放在github上的。查看emmet中文文档 鉴于里面的内容比较零散，不方便查看，所以我就有了一个心思将它整理成一篇文章。

1.HTML缩写语法

div>ul>li

...will produce

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

多个^连写将向上一层层返回：

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

...will output to

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

2.CSS前缀缩写

Emmet 的 CSS 解析器提供一个不错的功能，可以大大提高你的 CSS3 开发体验。在属性前或缩写前放一个连字符，Emmet 会自动给这个属性添加厂商前缀。例如缩写 -bdrs 将展开为：

-webkit-border-radius: ; -moz-border-radius: ; border-radius: ;

3.css三渐变

另一个难写的 CSS3 特性是渐变，需要重复写几遍带有不同厂商前缀的属性。而且如果想覆盖所有支持渐变的浏览器，得使用三种写法：旧版 Webkit、当前支持的 (linear-gradient(top, ...)) 及 W3C 标准 (linear-gradient(to bottom, ...))。

div{lg(left, #fff 30%, #000);}

按下tab键之后

div{
background-image:-webkit-gradient(linear, 0 0, 100% 0, color-stop(0.3, #fff), to(#ddd));
background-image:-webkit-linear-gradient(left, #fff 30%, #ddd);
background-image:-moz-linear-gradient(left, #fff 30%, #ddd);
background-image:-o-linear-gradient(left, #fff 30%, #ddd);
background-image:linear-gradient(left, #fff 30%, #ddd);
}

div{border-image:lg(left, #ddd 30%, #000);}

按下tab键之后

-webkit-border-image:-webkit-gradient(linear, 0 0, 100% 0, color-stop(0.3, #fff), to(#ddd));
-webkit-border-image:-webkit-linear-gradient(left, #fff 30%, #ddd);
-moz-border-image:-moz-linear-gradient(left, #fff 30%, #ddd);
-o-border-image:-o-linear-gradient(left, #fff 30%, #ddd);
border-image:linear-gradient(left, #fff 30%, #ddd);