emmet快速插入css_如何使用Emmet快速编写HTML

emmet快速插入css

For me, personally, one of the most boring parts about starting a new web project is having to structure the initial markup. I’m usually ready to dive straight into planning out the logic, setting up a database, or even just adding some basic styling, yet there I am copy/pasting lorem ipsum text 50 freaking times.

对我个人而言，开始新的Web项目最无聊的部分之一就是必须构造初始标记。 我通常准备直接研究逻辑，规划数据库，甚至只是添加一些基本样式，但是我在其中复制/粘贴了lorem ipsum文本50次。

But no more. The time of remembering how to set up a doctype, copy pasting li tags, and even writing out the words ‘class’ and 'id’ are over. With the Emmet extension, we can now write out a simple shorthand version of our markup, hit tab, and be amazed at the glories of the modern age.

但没有更多。 记住如何设置文档类型，复制粘贴li标签甚至写出“ class”和“ id”一词的时间已经结束。 有了Emmet扩展程序，我们现在可以写出标记的简单速记版本，点击选项卡，并对现代的辉煌感到惊讶。

I personally get really crazy with Emmet, writing at least 80% of my page over a few lines and using a CSS library so most of the layout and some styling is done out of the box. When combined with Pug, custom snippets, and Materialize, I feel almost omnipotent.

我个人对Emmet感到非常疯狂，用几行代码至少使用了80％的页面，并使用CSS库，因此大部分布局和某些样式都是开箱即用的。 当与Pug ，自定义片段和Materialize结合使用时，我感觉几乎是万能的。

安装 (Installation)

You’ll want to follow the installation step for your particular code editor. If you’re using VSCode, it’s actually built right in so you don’t even have to do anything and can start harnessing the power right away.

您需要遵循特定代码编辑器的安装步骤。 如果您使用的是VSCode，它实际上是内置的，因此您甚至无需执行任何操作，就可以立即利用电源。

基本语法 (Basic Syntax)

The syntax is very simple, just use the name of the tag you want, like header, ul, or script, and the symbol for the operation you want, and hit tab.

语法非常简单，只需使用所需标签的名称(如header ， ul或script )以及所需操作的符号，然后单击tab即可。

• > Add the proceeding items inside.

  >添加继续项。

• ^ Moves you up out of the current scope.

  ^您脱离当前范围。

• + Add the preceding items to the same scope.

  +将前面的项目添加到同一范围。

<!-- h1+ul>li -->
<h1></h1>
<ul>
  <li></li>
</ul>

<!-- header>nav^footer -->
<header>
  <nav></nav>
</header>
<footer></footer>

<!-- nav>div>h1+img^ul>li+li+li -->
<nav>
  <div>
    <h1></h1>
    <img src="" alt="">
  </div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

迭代和分组 (Iterations and Grouping)

In the above example we had to use three li’s for our list, which becomes quite annoying very fast. instead we can just * and pass in the number of repetitions we want.

在上面的示例中，我们必须使用三个li作为我们的列表，这变得非常烦人。 取而代之的是，我们可以*并传入所需的重复次数。

<!-- ul>li*2 -->
<ul>
  <li></li>
  <li></li>
</ul>

We can do even more than that, we can group sections of shorthand together using parenthesis (). Let’s make it so we have three groups of this list with two items each.

我们可以做的甚至更多，我们可以使用括号()将速记的各个部分组合在一起。 让我们开始吧，所以我们有该列表的三组，每组两个。

<!-- (ul>li*2)*3 -->
<ul>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
</ul>

属性和文字 (Attributes and Text)

We can do even more by adding classes and id’s into our shorthand. Just use a . for a class and a # for an id and append it to whatever you want it to apply to. Any other attributes can be put into brackets [] and typed out normally.

我们可以通过在速记中添加类和id来做更多的事情。 只需使用即可. 代表一个类，一个#代表一个ID，并将其附加到您想要应用的任何对象上。 可以将任何其他属性放在方括号[]并正常键入。

<!-- h1.title+input#name -->
<h1 class="title"></h1>
<input type="text" id="name">

<!-- Let's build on the former example -->
<!-- (ul.list>li.list-item*2)*3 -->
<ul class="list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>
<ul class="list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>
<ul class="list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>

<!-- img[src="#"]+script[src="#"] -->
<img src="#" alt="">
<script src="#"></script>

We can also start adding some basic content by adding what we want in curly brackets {}. Emmet also lets you generate lorem ipsum text with lorem followed by the amount of words you want.

我们还可以通过在大括号{}添加所需内容来开始添加一些基本内容。 Emmet还允许您生成带有lorem lorem ipsum文本，后跟所需的单词数量。

<!-- h1{I'm a title}+p>lorem20 -->
<h1>I'm a title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, expedita earum iste cumque unde perspiciatis nobis adipisci saepe a eum.</p>

<!-- When adding Lorem Ipsum to an li iteration, you can just omit the li's entirely -->
<!-- (ul.list>lorem10.list-item*2)*3 -->
<ul class="list">
  <li class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, totam.</li>
  <li class="list-item">Vero iure amet blanditiis iste aperiam velit deleniti officiis consectetur!</li>
</ul>
<ul class="list">
  <li class="list-item">Ad et fuga sed earum veniam eius distinctio, omnis quas.</li>
  <li class="list-item">Error quam cumque eligendi dicta praesentium tenetur cum soluta qui?</li>
</ul>
<ul class="list">
  <li class="list-item">Reiciendis suscipit eveniet magnam ipsum quam? Qui rem consectetur inventore.</li>
  <li class="list-item">Consectetur odit quos commodi nulla eaque, sapiente reprehenderit perspiciatis. Voluptate?</li>
</ul>

结论 (Conclusion)

Emmet is by far one of my most used tools and, hopefully, after getting familiar with it and taking a look at this awesome cheetsheet, you too may get to experience the productivity boost that it can bring.

到目前为止，Emmet是我最常用的工具之一，希望在熟悉它并看一下这张很棒的清单后 ，您也可能会体验到它可以带来的生产力提升。

翻译自: https://www.digitalocean.com/community/tutorials/workflow-write-code-fast-with-emmet

emmet快速插入css