如何在 Emmet 中使用 {}？答案

【问题标题】：How to use {} in Emmet?如何在 Emmet 中使用 {}？
【发布时间】：2016-10-01 05:03:28
【问题描述】：

今天我创建了一个导航栏，我会在 Emmet 中使用 {}，我已经使用过：

div.container>main>div.header>section.top-area>nav>ul>li*4>a{Home, Contact, About, Other}

我希望它变成：

  <div class="container">
  <main>
    <div class="header">
      <section class="top-area">
        <nav>
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Other</a></li>
          </ul>
        </nav>
      </section>
    </div>
  </main>
</div>

但是我的 emmet-code 变成了：

  <div class="container">
      <main>
        <div class="header">
          <section class="top-area">
            <nav>
              <ul>
                <li><a href="">Home, Contact, About, Other</a></li>
                <li><a href="">Home, Contact, About, Other</a></li>
                <li><a href="">Home, Contact, About, Other</a></li>
                <li><a href="">Home, Contact, About, Other</a></li>
              </ul>
            </nav>
          </section>
        </div>
      </main>
    </div>

如何使用我的第一个代码之类的选项？

【问题讨论】：

我遇到了这个功能，但没有找到怎么做。我的解决方法是放置一些标志（如 SECTIONLABEL），然后搜索并替换它。
是的，我认为它只支持使用* 编号。你可以随时使用div.container>main>div.header>section.top-area>nav>ul>li>a{Home}^li>a{Contact}^li>a{About}^li>a{Other}，或者创建一个自定义的 sn-p，它将在每个地方进行选项卡供你输入。

标签： emmet

【解决方案1】：

您必须单独分配列表项中的锚点。这将起作用。

div.container>main>div.header>section.top-area>nav>ul>li>a[href=""]{Home}
+li>a[href=""]{Contac}+li>a[href=""]{About}+li>a[href=""]{Other}

【讨论】：

【解决方案2】：

首先，逐行写入列表的文本项：

Home
Contact
About
Other

然后选择所有项目，用缩写换行 – Ctrl+Shift+A (Adobe Brackets) 或 Ctrl+Shift+G (Sublime Text);

最后写代码展开：

div.container>main>div.header>section.top-area>nav>ul>li*>a{$#}

* — 复制到与所选文本中的行一样多的列表元素；

{$#} — 每一行都放在元素的文本内容中。

有关此 Emmet 功能的更多信息 → http://docs.emmet.io/actions/wrap-with-abbreviation/#wrapping-individual-lines

【讨论】：