VIM ·

Emmet 语法

首先,什么是 Emmet?官方给出了以下的解释:

Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes.

翻译过来就是:你可以使用类似于 CSS 选择器的语法来描述生成的树和元素属性中的元素位置。

那么什么是元素呢?元素指的就是我们的 div、p 标签等等。我们可以直接使用 p 加上 Tab 键就可以快速生成 <p></p>,这是极其方便的,现在的 IDE 好像都支持它。

嵌套运算符(Nesting Operator)

嵌套运算符用于在生成的树内定位缩写元素:它是否应该放置在上下文元素内部或附近。

(1)子代操作符(Child):>

就像我们使用 CSS 选择器那样,我们可以使用 > 操作符来创建我们的子代。

当我在编辑器中使用这个操作符进行如下代码的创建:

它的意思就是 div 下有一个子代的 div,紧接着在此子代中又有一个 p 标签。

结果如下:

 

 

很简单,而且很方便吧?


(2)兄弟操作符(Sibling):+

上面我们讲到了,创建子代的方法。但是现在,我们希望子代中的 div 不再包含 p 标签,而是与它成为同一级,都是父级 div 的子代。

那么我们就可以使用以下代码:

结果如下:

如此,它们就成为了同级的元素。


(3)返回上级操作符(Climb-up):^

我们在上面的代码中,创建的结果大家都看到了。那么这时候,我想要在父级元素的 div 的同级再创建一个 div 怎么办呢?如果直接使用上面的兄弟操作符,结果就成了这样:

结果如下:

 

很显然,这不是我们想要的结果。这时候,我们就需要用到返回上级选择器了。

代码如下:

结果如下:

 

 

不错,达到了我们想要的目标。但是遇到更复杂的场景呢?一层层的嵌套后,这时候要怎么才能返回到最初的父级元素呢?

这时候我们就可以多次的使用这个操作符。
例如如下代码:

这时,我们使用了 3 次 ^ 操作符使其返回到了最初的父级 div 元素上,我们来看看结果吧:

 

没错了,完美!


(4)乘法操作符(Multiplication):*

我们知道,用到重复元素最多的地方要数 ul 中的 li 了。一个一个复制,这显然是很麻烦而又枯燥的一件事情。

这时,我们可以使用乘法来解决它。比如我们这时需要 5 个 li。一个个复制太累啦,我们简单的一点代码就搞定它:

结果如下:

 

很好理解吧。


(5)分组操作符(Grouping):()

这个分组是什么意思呢?很好理解,比如我们在创建一个页面结构,如果一个一个往下这么写,最后再使用 ^ 一层一层的返回上去,恐怕数数都要数晕了吧。

那么使用这个分组就轻松的解决了问题,来,我们来个布局吧。

我不知道这个 Emmet 语法是否有点困难?但是我们可以试着分析下,就很清楚,我们将其分为了 header、main 和 footer 三个页面结构。

结果如下:

 

相信你应该是正确的。

另外,我们上面还有使用 ^ 操作符来进行返回上一级的元素,但是元素多了不就很难受了吗,这时候我们就可以使用分组,将其分为一个个的部分,省去了大量的思考。

比如:

结果如下:

采用分组,我们就可以不用在代码中的 a 标签处使用很多的 ^ 操作符去一级一级地返回啦。明白了吗?


属性操作符(Attribute Operators)

属性运算符用于修改输出元素的属性。

(1)ID 和 Class(ID and CLASS)

想必在我们写代码的时候,不可能没有这两个属性吧?在 Emmet 语法中,我们可以快速生成它们。

例如下列代码:

这样我们就快速的创建了它们,还是使用我们最熟的 # 和 . 来写。

结果如下:

我知道,这时候你会问,如果我们的 Class 属性不止一个呢?怎么办啊!

没关系,我们使用并列书写的原则就可以啦。

结果如下:


(2)定制属性(Custom attributes)

定制的属性,我们就不可以使用简单的写法啦,这时候,我们就需要使用中括号[] 来将其括起来。

比如我们的 a 标签,它默认只有 href 属性,如果我们还需要别的呢:

结果如下:

 

这样,我们就给其添加了别的属性了。


(3)数值计算操作符(Item numbering):$

我们有时候在给 class 添加它的属性时,我们希望它是按照一定的数字进行排列,那么我们就可以使用这个操作符。

比如:

结果如下:

如果你想倒着写数值的话呢,可以在 $ 操作符后面再加上 @-,也就是这样:

结果如下:

 

不过这种情况我们很少会遇到。

最后还有一种情况,那就是你想指定数字是从几开始,那么你需要在 $ 后面加上 @N,这里的 N 为开始的数值。

结果如下:


(4)文本操作符(Text):{}

我们可以使用大括号 {} 来对其输入一定的内容。这个操作符就很简单啦。

结果就是这样啦:

 

这个不难,就不再多举例了。当然你也可以连着别的标签写。

结果如下:


总结

以上就是 Emmet 写法的全部内容了。当然了,还有 CSS 相关的几个写法,我觉得没必要讲了,那都是对浏览器前缀的写法,现在的现代浏览器都已经不再需要使用前缀来识别属性了。

本文转载于:https://www.jianshu.com/p/9e2f55776bc0

评论已关闭