Emmet语法 | IT-北北报

Emmet语法

2014/11 05 12:11

看到Emmet的语法,我不得不说我惊呆了,发明这个的人真是碉堡了。

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度。

让我们迫不及待的来学习如何使用Emmet语法来生成HTML和CSS代码吧!!!

安装Emmet插件

Emmet只是文本编辑器一个插件,要想让他发挥应用的功能,就得将其安装到你喜欢的文本编辑器中。到目前为止,很多流行的文本编辑器都支持Emmet插件,也就是说很多流行的文本编辑器都可以安装这款插件。

点击下面的链接,按照说明文档可以给对应的文本编辑器安装Emmet插件:

它是如何工作的?

在Web前端开发中,我们不得不面对一个残酷的现实。在写HTML代码时需要一定的时间,因为我们要花大把的时间写HTML标签,属性,引号等;同样在编写CSS时,我们要写很多的属性、属性值,大括号和分号等。当然,大多数的文本编辑器都或多或少带有代码自动提示功能,在开发之时,帮了很大的忙,但仍然需要人工输入很多代码。而Emmet插件,集成了很多缩写,大家在开发时只需要输入简单的缩写,按tab键或ctrl+E键就能扩展出所需的代码片段。

Emmet和HTML

假定你已经为您自己喜欢的文本编辑器成功的安装好了Emmet插件,接下来我们来简单的看看如何使用Emmet帮助您快速编写您的HTML标签。

Emmet使用定义的缩写来生成元素。他的语法和CSS的选择器非常类似:

ul>li>img+p 

一旦你写好缩写之后,按一下tab键(如Sublime viagra 100mg Text编辑器)就能生成你所请求的代码。上面的例子将会产生下面的代码:

<ul> <li> <img src="" alt=""> <p></p> </li> </ul> 

使用Emmet加速Web前端开发

创建初始文档

任何一个HTML文件,都具有一些默认的文档结构。使用Emmet来创建需要的时间不到一秒。只要输入!html:5,然后点击tab键,你就会看到一个HTML5的doctype默认标签。

使用Emmet加速Web前端开发

子元素>

使用>运算符可以用来生成彼此嵌套的元素:

section>div>p 

上面的代码会生成下面的代码:

viagra for women

<section> <div> <p></p> </div> </section> 

使用Emmet加速Web前端开发

相邻元素+

使用+运算符可以用来生成彼此相邻的元素:

section+div+p 

上面代码会生成下面的代码:

<section></section> <div></div> <p></p> 

使用Emmet加速Web前端开发

返回上一层^

使用^运算符,可以让你的代码返回上一层。当你使用>嵌套元素时,想让后面的回到上一层,那么这个方法很适用。

section>div>p>a^p 

这个缩写将两个段落元素都放置在div内,但只有第一个段落里会包含一个链接。

<section> <div> <p><a href=""></a></p> <p></p> </div> </section> 

使用Emmet加速Web前端开发

其实这个就相当于:

generic levitra

section>div>(p>a)+p onlinepharmacy-kamagra.com 

使用Emmet加速Web前端开发

乘法*

如果你想一次性生成多个相同的元素,比如列表中的li,那么就可以使用乘法运算符*:

ul>li*5 

上面代码会生成不个li

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 

使用Emmet加速Web前端开发

除了能一次性生成多个相同的标签之外,我们还可以通过$符号做递增;通过$@-符号做递减;通过$@3*5这样的方式从第三个开始命名:

使用Emmet加速Web前端开发

组合

cheap generic levitra brand

为了更有效的利用嵌套,我们常会制作一些代码片段。在Emmet中你可以通过()将一个块组合在一起,来看一个简单的示例:

ul>(li>a)*3 

上面的代码就会生成3个li,而且每个li中套了一个a:

<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> 

在我们一个页面中,常会包括页头、主体和页脚三个部分,我们很多时候就可以通过对全们进行一个组合,快速生成有效的代码:

使用Emmet加速Web前端开发

快速添加类名、ID、文本和属性

cheap generic kamagra oral jelly grape

在Emmet中,还有一个功效,能快速帮助你添加类名、ID、文本和属性。

  • 使用E#ID添加ID名
  • 使用E.class添加类名
  • 使用E[attr]添加属性
  • 使用E{text}添加文本

使用Emmet加速Web前端开发

省略标签名

在Emmet中可以省略标签名,默认情况下,如.itemdiv.item起到的作用是一致的<div></div>。在实际中还有几种情况:

  • ulol中输入指的是li
  • tabletbodytheadtfoot指的是tr
  • tr中指的是td
  • selectoptgroup指的是option
  • kamagra oral jelly

使用Emmet加速Web前端开发

Emmet和HTML更详尽的介绍可以阅读:Matt West的《Using Emmet to Speed Up Front-End Web Development》、Zeno Rocha的《Goodbye, Zen Coding. Hello, Emmet!》和白牙的《前端开发必备!Emmet使用手册

Emmet和CSS

很多文章都是介绍Emmet和HTML之间的实现方式,但Josh Medeski的《Turbo-Charge Your CSS With Emmet》一文详细介绍了Emmet和CSS之间的实现方式。接下来的代码和图片主要来自于此文章。

属性

CSS提供了属性的值,比如font-sizemarginpadding等等:

使用Emmet加速Web前端开发

Emmet定义了所有已知的CSS属性和缩写。所以border-bottom缩写是bdbborder-top缩写是bdt。正如下面的示例font-size缩写是fz

假设你在你的编辑器中输入fz,然后按一下tab键,Emmet就像一个魔法师一样将缩写变成有效的CSS,并且放在你的光标之处。

使用Emmet加速Web前端开发

属性值

现在我们已经了解了CSS的属性,它只需要添加一个值。这是通过一个组合缩写和所需要的值一起来完成。例如,fz18将输出font-size:18px。你不需要输入px,因为Emmet将会其单位是px。如果一个项目没有一个单位(如font-weight),Emmet会很聪明,他不会添加像素单位。

使用Emmet加速Web前端开发

单位

如果你在CSS不经常使用的像素(px)单位,那会是什么?是emrem%expx吗?那么这些单位在Emmet中都是可以使用的。在Emmet中每一个单位都有其缩写形式:

  • px→ 默认
  • p%
  • eem
  • rrem
  • xex

要使用一个单位,只需要在值的后面使用缩写的单位值。下面的例子是使用em定义font-size

使用Emmet加速Web前端开发

多个单位

CSS中的某些属笥,比如margin,允许多个值。在Emmet中要做到这一点,只需要每个值之间使用破折号(-)。来看看下面的例子,给body定义margin的四个值:

使用Emmet加速Web前端开发

颜色

在Emmet中使用#前缀,后面紧跟颜色值,但不同的字符数将会输出不同的十六进制代码。来看一些例子:

下面定义通过c#2定义body的颜色值,将会输出#222

使用Emmet加速Web前端开发

!important

尽管在CSS中!important并不经常使用,但在Emmet也带有一定的缩写。添加!就可以自动生成:

使用Emmet加速Web前端开发

多属性

现在我们具Emmet的CSS特性的一个基本了解,也是将它们放在一起的时候。就类似于Emmet和HTML中的相邻元素的功能。可以使用加号+运算符来创建多个属性。我们来看一个简单的示例:

使用Emmet加速Web前端开发

示例

记住,你可以使用所有缩写或者将其分开。这并不是很重要,关键的是你要使用得正确,它能更容易让你编写你的CSS。这里有一个动画,他给div.panel创建一些样式:

使用Emmet加速Web前端开发

以上示例代码与演示图来自于Josh Medeski的《Turbo-Charge Your CSS With Emmet》一文。

最后要说

Emmet是一个强大的工具,也被称为是一款高速的编码工具,它可以让你花更少的时间做同样的事情,而无需手动创建自己的代码片段。Emmet的灵感来自于CSS选择器以及可以用于所有主要的文本编辑器,以适应开发者的工作流程。

在前端开发中,只要你不停学习,总会有新的发现!–北北

文章来自:w3cplus,感谢大漠。



--转载请注明: IT-北北报 » Emmet语法



无觅相关文章插件,快速提升流量