Emmet用法简介

2024年3月17日 211次阅读 来源: WillSu

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.
    原文作者：WillSu
    原文地址: https://segmentfault.com/a/1190000007551258
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞