介绍一个支持多个文本编辑器的HTML和CSS代码快捷编写插件

浏览数：22 / 时间：2015年06月09日

Emmet基本符号说明

> 子级；

() 子级选择器，与>的不同是：>仅能跟一个，()可以有多个子级；

+ 连接符，如header+main+footer或者table>(thead>tr>th*5)(tbody>tr>td*5)，或者nav>ul>(li>a[href=#]{Link})*5；

^ 返回上一级，例如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>

* 后面紧跟一个整数，声明输出数量，下面有示例；

$ 变量占位符，一般写在*之前，下面有示例；

@ 站位变量的偏移符号，下面有示例；

[] 可以在方括号里写属性及其值，如果单个属性有多个值，应该以双引号引起来；

{} 文本符号，例如： a{点我}等于<a href="#">点我</a>;a[href=http://wikipedia.org]{维基百科}

在CSS中，ID和CLASS分别以#和.前缀表示，可以直接连写；

一、在HTML中使用Emmet

!或者html:5

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

此外，还有比较老的html:xt或者html:4s

a.link等于

<a href="" class="link"></a>

button.btn.btn-blue等于

<button class="btn btn-blue"></button>

h1+div.content等于

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

.post(.title+.content)等于

<div class="post">
<div class="title"></div>
<div class="content"></div>
</div>

.post(.title+.content+.meta>(.author+.category+tags+.date))等于

<div class="post">
<div class="title"></div>
<div class="content"></div>
<div class="meta">
<div class="author"></div>
<div class="category"></div>
<tags></tags>
<div class="date"></div>
</div>
</div>

ul.list>li.list-item*5等于

<ul class="list">
<li class="list-item"></li>
<li class="list-item"></li>
<li class="list-item"></li>
<li class="list-item"></li>
<li class="list-item"></li>
</ul>

ul>li.list-item$*5等于

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

ul>li.list-item$@6*5等同于

<ul>
<li class="list-item6"></li>
<li class="list-item7"></li>
<li class="list-item8"></li>
<li class="list-item9"></li>
<li class="list-item10"></li>
</ul>

示例内容的生成，如p>lorem*3等于

<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, totam, praesentium, sequi, illo libero voluptatum doloribus deleniti error nulla molestias illum nesciunt nisi eaque nemo maxime eveniet delectus sapiente voluptatem.</span>
<span>Natus, cupiditate, accusamus iure tempora repellendus ad facilis aperiam adipisci fuga atque? Sit at ea nemo culpa tempora dolorem perspiciatis quas! Dolorum sint quidem architecto deleniti soluta aspernatur amet deserunt.</span>
<span>Vitae, ut, temporibus, laboriosam debitis incidunt veritatis tenetur reprehenderit nihil mollitia in eveniet perspiciatis voluptatibus possimus laborum quibusdam rem modi dignissimos laudantium alias itaque assumenda maxime voluptate exercitationem eligendi fugiat.</span>
</p>

p*3>lorem15等于生成单个段落，每个段落有十五个词：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae numquam animi praesentium nulla dignissimos quibusdam!</p>
<p>Eaque, quaerat, unde, porro pariatur fugit debitis dignissimos sit architecto nostrum quisquam ipsam voluptatibus repellat.</p>
<p>Molestias, eveniet, nam error totam ex pariatur porro odio ratione distinctio quibusdam veritatis perferendis sed!</p>

二、在CSS中使用Emmet

p → %
e → em
x → ex

@f等于

@font-face {
font-family:;
src:url();
}

ov等于

overflow: hidden;

trs等于

-webkit-transition: prop time;
-moz-transition: prop time;
-ms-transition: prop time;
-o-transition: prop time;
transition: prop time;

还可以加前缀，如-suoling-shadow等于

-webkit-suoling-shadow: ;
-moz-suoling-shadow: ;
-ms-suoling-shadow: ;
-o-suoling-shadow: ;
suoling-shadow: ;

不想要前缀，例如-wm-trs等于：

-webkit-transition: prop time;
-moz-transition: prop time;
transition: prop time;

另外

w → -webkit-
m → -moz-
s → -ms-
o → -o-

-shadow等于

-webkit-shadow: ;
-moz-shadow: ;
-ms-shadow: ;
-o-shadow: ;
shadow: ;

也就是说，-suoling等同于-wmos-suoling。

lg(left, #fff 50%, #000)等于色彩渐变：

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);