Emmet用法简介

浏览: 145 发布日期: 2016-11-21 分类: sublime-text

Emmet Grammar

HTML

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

html:5
html5
!

输出效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    
</body>
</html>

为元素添加class, id

p.red
div#form-login

为元素添加attribute

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

输出效果

<input type="text" value="10">
<a href="javascript:void(0)"></a>
<div style="color:red"></div>

为元素添加内容(innerText

section#slogan{Hello world!}

输出效果

<section id="slogan">Hello world!</section>

元素嵌套、同级、换行

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

输出效果

<p><span></span></p>

<p class="parg1"></p>
<p class="parg2"></p>

<p><span></span></p>
<p></p>

表达式分组,同^效果

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

输出效果

<div class="foo">
    <h1></h1>
</div>
<div class="bar">
    <h2></h2>
</div>

定义多个元素

ul>li*3

输出效果

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

为class顺序编号,使用$

ul>li.item$3

输出效果

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

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.
返回顶部