Emmet用法简介

Emmet Grammar

HTML

输入如下三行任意一个，实现相同效果

html:5
html5
!

输出效果

---

为元素添加class, id

p.red
div#form-login

---

为元素添加attribute

input[value=10]
a[href=javascript:void(0)]
div[style=color:red]

输出效果

---

为元素添加内容（innerText）

section#slogan{Hello world!}

输出效果

Hello world!

---

元素嵌套、同级、换行

p>span
p.parg1+p.parg2
/* ^为表达式结束符 */
p>span^p

输出效果

---

表达式分组，同^效果

(.foo>h1)+(.bar>h2)

输出效果

---

定义多个元素

ul>li*3

输出效果

---

为class顺序编号，使用$

ul>li.item$3

输出效果

CSS

CSS属性、单位的缩写mapping如下

/* 属性 */
m -> margin
w -> width
h -> height
ov-h -> overflow: hidden

/* 单位 */
p -> %
e -> em
x -> ex

---

@font-face

@f
@f+

输出效果

@font-face {
    font-family: 'FontName';
    src: url('FileName.eot');
    src: url('FileName.eot?#iefix') format('embedded-opentype'),
         url('FileName.woff') format('woff'),
         url('FileName.ttf') format('truetype'),
         url('FileName.svg#FontName') format('svg');
    font-style: normal;
    font-weight: normal;
}

---

供应商前缀

trs
-super-foo

/* Browser prefix */
w -> -webkit-
m -> -moz-
s -> -ms-
o -> -o-

输出效果

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

---

渐变

lg(left, #fff 50%, #000)

输出效果

background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);

---

生成测试文本

lorem10

输出效果

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum deleniti molestiae voluptatem placeat sequi sint saepe rem omnis dolorem amet cumque perferendis rerum possimus, autem corrupti distinctio, aut. Repellendus.