先来说些闲话。。。
两个月前来到了新的互联网公司,我才陡然发现自己之前所谓的前端是多么狭隘的称谓,来到这里我才见识了高大上的前端--工程化,虽然到现在还没上手,但是我那颗小小的心开始砰动了。。。但我今天要记录的并不是前端工程化的问题(日后待写),今天要记录的是我刚刚学了那么一点的小工具-emmet ,之前不知道编写代码还能这么省事迅速,还一直当着苦逼的码农,哎,只能说见识短了有苦吃啊。。。下面该进入正题了:
Emmet的前身是大名鼎鼎的Zen coding,它使用了仿css选择器的语法生成代码,大大提高了html/css代码的编写速度。
HTML
1. 初始化
html需要包含一些固定的标签,比如<html>、<head>、<body>等,现在只需要输入!或html:5( html5类型),然后按tab
2. 添加类、id、文本和属性
p.foo#name{sunsan} a[href=#]
3. 嵌套
>:子元素符号,表示嵌套的元素
+:同级标签元素
^:可以使该符号前的标签提神一行
p>span h1+h2 p>span^p
4. 分组
可以通过嵌套和括号来生成一些代码,比如(.foo>h1)+(.bar>h2)
5. 定义多个元素
定义多个元素可以使用*,比如ul>li.item*3 ul>li.item$*3
CSS
1. 值
p:表示%
e:表示em
x:表示ex
比如h10p+m5e
2. 附加属性
比如 @f,可以生成:
@font-face {
font-family: ;
src:url();
}
3. 模糊匹配
ov:h ov-h ovh oh匹配overflow:hidden;
4. 供应商前缀
trf自动生成
也可以使用缩写来指定某些浏览器前缀,比如-wm-trf表示只加上-webkit-和-moz-前缀
前缀缩写如下:
w : -webkit-
m : -moz-
s : -ms-
o : -o-