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);