Emmet前端开发神器

来源：互联网发布：macbook不能下载软件编辑：程序博客网时间：2024/05/17 05:01

前端开发神器Emmet

1-1 简介

Emmet是专门给前端开发人员准备的一个快捷开发工具，是从原来的ZenCoding发展而来的，原来的意思是代码压缩输出，通过极少的代码，来快速生成包含大量代码的模板。

下面看一个简单的案例，在编辑工具中编写如下代码

#page>div.logo+ul#nav>li*5>a{导航菜单$}

然后按下tab键，你会发现，神奇的变化出现了，编辑工具中代码变成了如下代码：

</ul>

</div>

怎么样，现在看到ZenCoding，或者说Emmet要做的事情有多么的神奇了吧？！

1-2 IDE工具中使用Emmet

首先，Emmet作为一个高速提升前端开发效率的工具，已经被很多的IDE工具支持了，诸如当前流行的一些工具如Dreamweaver、HBuilder、WebStrom等等，这些工具中直接使用Emmet语法就可以实现代码的快速编辑了。

同样的，在我们进行维护的过程中，使用的工具并不是前面提到的半自动化的工具，而是超级记事本如Editplus、Ultraedit、Sublime等等，对于这样的工具，都有各自的插件已经提供了对Emmet的支持，如sublime中可以通过package install来搜索安装Emmet插件，安装完成后就可以直接在sublime中使用emmet语法快速编辑代码了！

1-3 Emmet语法之HTML操作

这里直接上干货，相信开始关注emmet的程序员，已经是比较专业的前端开发人员了。

SO，废话不说了。

1-3-1 快速生成标签

书写标签名称，然后按下tab键即可完成一个标签的输入

div

1-3-2 标签id,class属性

书写标签名称，在标签后面使用符号“#”来指定标签的id名称，使用符号“.”来指定标签的class属性名称，是不是和css语法有点类似呢？Bingo！

div#logo

div.nav

div#box.detail

1-3-3 标签其他属性操作

书写标签名称，在标签的后面，添加一堆方括号，在方括号中添加属性的名称和属性值，就可以对标签的属性内容进行指定了。

img[src=”imgs/bg.png”]

1-3-4 标签内容操作

书写标签名称，在标签的后面，添加一对大括号“{}”，在大括号的内部添加内容，然后按下tab键，就可以在生成的标签中间添加指定的内容

div{this is content}

<div>this is content</div>

1-3-5 生成多个标签

书写标签名称，在标签的后面，紧跟符号“*”，然后写上要输出的整数数量，就可以让某个指定的标签同时出现多个，同时可以通过符号“$”对内容进行编号

div{test$ content$$}*5

<div>test1 content01</div>

<div>test2 content02</div>

<div>test3 content03</div>

<div>test4 content04</div>

<div>test5 content05</div>

同时可以在$符号后面紧跟一个符号@，用于指定编号的起始数字和排列顺序

div{item$@3}*3

div{item$@-5}*3

1-3-6 生成父子标签

书写父标签名称，然后紧跟符号“>”，后面写子标签名称，就可以自动转换成父子标签

ul>li{item$}*3

<ul>

</ul>

1-3-7 生成同级标签

书写标签，然后紧跟符号“+”，后面写同级别的其他标签，就可以自动转换成同级别标签

div{test}+p{p content}

<p>p content</p>

1-3-8 生成父级同级标签

书写标签名称，在其子标签的后面，添加符号“^”，继续编写其他的标签，此时在“^”后面生成的标签，是和父级标签同级别的标签

div>a[href=”http://www.baidu.com”]{BAIDU}^div{description info}

<div>

<a href=”http://www.baidu.com”>BAIDU</a>

</div>

<div>

description info

</div>

1-3-9 通过分组简化Emmet语法

一旦涉及到一次输出父子标签，同时父级标签还有同级标签的情况下，会比较麻烦，可以通过添加圆括号“()”进行标签分组来简化Emmet语法结构，参考代码如下：

(div>a[href=”http://www.baidu.com”])+(div{description info})

<div>

<a href=”http://www.baidu.com”>BAIDU</a>

</div>

<div>

description info

</div>

使用分组能极大程度的简化Emmet复杂的语法结构，如下案例：

# 不使用分组编写的一段Emmet语法

header>ul#nav>li*5>a[href="#"]{menu$}^^^div#container{body content}^footer>ul>li*10>a{friend links}

# 使用分组编写的一段Emmet语法

(header>ul#nav>li*5>a[href="#"]{menu$})+(div#container{body content})+(footer>ul>li*10>a{friend links})

注意观察，可以看到分组的语法，会相对来说更加切合我们的思路，最终生成的代码如下

同样的，我们可以看到Emmet给我们带来了多大的便利！

</ul>

</header>

<div id="container">body content</div>

<ul>

<li><a href="">friend links</a></li>

</ul>

</footer>

1-4 Emmet语法之CSS操作

Emmet同时对CSS也进行了代码压缩输出，在一定程度上简化了CSS语法的繁琐程度，但是样式操作根据个人开发习惯可以适当使用，毕竟样式的操作在一定程度上调整的频率较大

1-4-1 简写CSS属性

通过简写属性名称和属性值，完成代码的快捷输出，如：

w100

width:100px;

w100p

width:100%;

w100r

width:100rem;

h100

height:100px;

h100p

height:100%;

h100r

height:100rem;

bd10

border:10px;

bg#0

background:#000;

bgc#20

background-color:#202020

bgi

backgoround-image:url()

fsi

font-style: italic;

fz16

font-size:16px;

fw100

font-weight:100;

bd5#8s

border:5px #888 solid;

bdrs5

border-radius:5px;

bdl2

boder-left:2px;

1-4-2 简写多个属性

某些情况下，我们会简写样式语法，如margin值，会控制上、右、下、左各个方向的外边距数据，此时，通过中划线”-”来拆分多个数据

mg10-20-30-40

margin:10px 20px 30px 40px;

1-4-3 一次生成多条语句

如果我们对样式已经非常熟悉了，可以通过Emmet语法来一次性生成多条样式语句，通过符号“+”来连接。

h10p+m5e

height:10%;margin:5em;

1-4-4 颜色操作

颜色数据在Emmet中主要通过16进制的方式进行处理，简要语法如下

bd5#0s

border:5px #000 solid;

规则方式

#000;

#80

#808080;

#fc0

#ffcc00;

1-4-5 扩展选项

CSS3标准中增加了很多新的语法格式，如字体设置@font-face

通过@f可以生成简单结构

通过@f+可以生成比较完整的结构

@font-face{

font-family:;

src:url();

}

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

}

</style>

</head>

<body>

1-4-6 浏览器兼容性前缀

在样式属性的前面，增加一个符号“-”，可以生成支持不同浏览器的样式属性

-transform

-webkit-transform: ;

-ms-transform: ;

-o-transform: ;

transform: ;

-animation

-webkit-animation-timing-function: ease-in-out;

-o-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

1-4-7 渐变背景

CSS3中新增加了linear-gradient样式属性，可以直接制作渐变效果，这个效果参数较为复杂，而且需要添加不同浏览器的前缀操作。不过可以通过lg()来快速生成。

lg(left,#f 50% #0)

阅读全文

2 0