Emmet的前身是大名鼎鼎的Zen coding,它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度。

HTML的缩写

初始化

“!”或“html:5”:初始化html5的文档格式;”html:4s”:初始化html4的严格文档格式。

下面来看看如何定义HTML元素的内容和属性

你可以通过输入h1{foo}和a[href=#],就可以自动生成如下代码:

<h1>foo</h1>  
<a href="#"></a>

嵌套

>:子元素符号,表示嵌套的元素;+:同级标签符号。

##分组
你可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2):

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

隐式标签

在过去版本中,可以省略掉div,即输入.item即可生成:

<div class="item"></div>

定义多个元素

要定义多个元素,可以使用符号。比如,ul>li3

定义多个带属性的元素

如果输入 ul>li.item$*3>a{item $}

CSS的缩写

比如要定义元素的宽度,只需输入w100,即可生成width: 100px; 除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下:

height: 10%;
margin: 5em;

Comments

去留言
2016-03-28

⬆︎TOP