emmet之css语法_使用Emmet更快地编写HTML和CSS

作为Web开发人员，我们一直在寻找一种工具来增加我们的工作流程和生产力。 今天的帖子专门针对那些经常使用HTML和CSS的 Web开发人员，因为我们将研究一种工具，该工具可以使我们（更快）编写这两种基本的Web语言– Emmet 。

Emmet是ZenCoding的扩展开发，它完全是用JavaScript编写的。 在本演示中，我将使用Sublime Text，Emmet也可用于许多代码编辑器，包括TextMate，Coda，Eclipse，Notepad ++和Adobe DreamWeaver 。

安装Emmet

转至此页面 ，找到并下载Emmet为您的代码编辑器。 如果您像我一样使用Sublime Text，则可以通过Package Control轻松安装Emmet。

安装后，您可能需要重新启动Sublime Text。

用Emmet编写HTML

当前大多数编辑器可能具有类似的内置功能。 例如，在Sublime Text中，我们只需编写<ul>并按Tab键，它将自动扩展为带有<li>元素的完整无序列表。

我们还可以编写以下div.class来在元素中分配HTML类。

在这种情况下，Emmet进一步扩展了此功能，使我们能够以更简化的方式使用缩写或别名来编写复杂HTML结构，类似于CSS中的结构。 因此，如果您已经熟悉CSS语法，则应该很快熟悉它。

另外， Emmet文档提供了大量的缩写词和别名及其用途，这对于初学者来说可能是非常令人生畏的。 但是，至少我认为这是我应该知道的一些基本知识。

子元素

如前所述，Emmet使用类似于CSS的语法。 在CSS中，我们有一个直接的子选择器，该选择器用>符号表示。 在Emmet中，我们也使用此运算符添加子元素。 例如：

兄弟元素

同级指的是处于相同嵌套级别的元素。 在CSS中，我们可以选择带有加号+同级元素。 同样，我们可以使用它与Emmet添加同级元素。

分配ID或类别

我们可以使用CSS中的#符号来选择具有其id属性的元素。 在Emmet中，我们使用#来为元素分配ID属性，正如我们之前所展示的，我们还可以在元素中分配HTML类，就像选择元素类一样。 例如：

如上所示，当我们不指定元素时，Emmet将使用<div>作为默认值。 如果想更具体一点，可以在类或ID名称之前声明元素类型，就像这样。

专门针对HTML类，我们可以通过这种方式在一个元素中分配多个类。

分配属性

在CSS中，我们使用方括号来选择属性。 Emmet也可以应用相同的方法将属性分配给生成的元素。

乘法

Emmet还允许我们使用星号(*)符号在特定数字中添加HTML元素，这可以节省时间。 在此示例中，我们在<section>元素下添加了<h3>和四个<h4> 。

基本HTML文档

我们可以使用Emmet快速构建HTML文档中的基本结构。 给定基本HTML5结构的示例，我们可以采用这种方式。

洛普伊普森

最后，这是我在Emmet中的最爱之一。 Sublime Text附带了生成lorem ipsum虚拟文本的快捷方式。 我们只需要编写lorem并点击Tab ，它将扩展到大约5到7行lorem ipsum 。

在这种情况下，Emmet的工作方式略有不同。 使用Emmet，我们可以指定要生成多少个单词。 说，我们只需要3个字，就可以编写lorem3 ：

指定您的lorem ipsum文本要保留多长时间。

在CSS中使用Emmet

我们还可以使用Emmet编写CSS。 与HTML相似，它将别名扩展为完整CSS属性及其值。 让我向您展示一个示例：假设我们要添加一个值为10px的padding ，我们只需编写p:10并按下Tab键，它将自动将其扩展为padding: 10px ，如下所示。

或者，如果要隐藏元素，则可以使用visibility或display属性。 使用Emmet，我们可以用这种方式编写这些CSS属性。

但是，尽管有很多优点，但当涉及到CSS时，我仍然更喜欢使用代码编辑器中的自动完成功能，因为它对我来说更加方便。 另外，记住这些CSS别名要比HTML难一些，不过，您可以在此处参考CSS和HTML的Emmet别名备忘单 。

结论

Emmet确实是一个出色的工具，我认为它是Web开发人员必不可少的工具。 唯一的缺点可能是初学者需要的学习曲线，但是一旦掌握了它，就可以显着提高生产力。 您可以比以往更快地编写HTML和CSS。

那么，您是否尝试过此工具？ 在下面的评论部分分享您的想法。

翻译自: https://www.hongkiat.com/blog/html-css-faster-emmet/