前端开发神器Emmet
1-1 简介
Emmet是专门给前端开发人员准备的一个快捷开发工具,是从原来的ZenCoding发展而来的,原来的意思是代码压缩输出,通过极少的代码,来快速生成包含大量代码的模板。
下面看一个简单的案例,在编辑工具中编写如下代码
#page>div.logo+ul#nav>li*5>a{导航菜单$} |
然后按下tab键,你会发现,神奇的变化出现了,编辑工具中代码变成了如下代码:
<div id=”page”> <div class=”logo”> <ul id=”nav”> <li>导航菜单1</li> <li>导航菜单2</li> <li>导航菜单3</li> <li>导航菜单4</li> <li>导航菜单5</li> </ul> </div> </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 | <div></div> |
1-3-2 标签id,class属性
书写标签名称,在标签后面使用符号“#”来指定标签的id名称,使用符号“.”来指定标签的class属性名称,是不是和css语法有点类似呢?Bingo!
div#logo | <div id=”logo”></div> |
div.nav | <div class=”nav”></div> |
div#box.detail | <div id=”box” class=”detail”></div> |
1-3-3 标签其他属性操作
书写标签名称,在标签的后面,添加一堆方括号,在方括号中添加属性的名称和属性值,就可以对标签的属性内容进行指定了。
img[src=”imgs/bg.png”] | <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>item3</div> <div>item4</div> <div>item5</div> |
div{item$@-5}*3 |
<div>item7</div> <div>item6</div> <div>item5</div> |
1-3-6 生成父子标签
书写父标签名称,然后紧跟符号“>”,后面写子标签名称,就可以自动转换成父子标签
ul>li{item$}*3 | <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> |
1-3-7 生成同级标签
书写标签,然后紧跟符号“+”,后面写同级别的其他标签,就可以自动转换成同级别标签
div{test}+p{p content} | <div>test</div> <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给我们带来了多大的便利!
<header> <ul id="nav"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </header> <div id="container">body content</div> <footer> <ul> <li><a href="">friend links</a></li> <li><a href="">friend links</a></li> <li><a href="">friend links</a></li> <li><a href="">friend links</a></li> <li><a href="">friend links</a></li> <li><a href="">friend links</a></li> <li><a href="">friend links</a></li> <li><a href="">friend links</a></li> <li><a href="">friend links</a></li> <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; |
规则方式 |
|
#0 | #000; |
#80 | #808080; |
#fc0 | #ffcc00; |
1-4-5 扩展选项
CSS3标准中增加了很多新的语法格式,如字体设置@font-face
通过@f可以生成简单结构
通过@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> <div>item3</div> <div>item4</div> |
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) | background-image: -webkit-linear-gradient(left, #f 50%); background-image: -o-linear-gradient(left, #f 50%); background-image: linear-gradient(to right, #f 50%); |