Pug新手求教：正确处理<span>标签的语法规范

嘿，作为Pug新手，刚上手把重复HTML转成Pug的时候，碰到嵌套标签确实容易卡壳～我来帮你把这段HTML转换成标准的Pug语法，顺便给你拆解下关键要点，方便你以后举一反三。

首先先把你的原始HTML整理得更清晰一点：

<nav class="...">
  <div class="container">
    <div class="navbar-header">
      <button type="button">
        <span class="sr-only">toggle navigation</span>
        <span class="icon-bar">...</span>
        <!-- 你省略的其他icon-bar标签也可以按同样方式处理 -->
      </button>
    </div>
  </div>
</nav>

对应的正确Pug写法如下：

nav.your-nav-class
  .container
    .navbar-header
      button(type="button")
        span.sr-only toggle navigation
        span.icon-bar ...
        //- 如果有更多的icon-bar，直接在这里继续添加同级缩进的span.icon-bar即可

给你拆解几个Pug的核心写法逻辑：

• 缩进代替闭合标签：Pug完全靠缩进（一般用2个空格）来表示标签的嵌套关系，不用手动写</nav>、</div>这类闭合标签，能省超多代码
• 类名快捷写法：标签后面直接加.类名就等同于给标签加class属性，比如.container就是<div class="container">，span.sr-only就是<span class="sr-only">
• 属性写法：标签的属性放在括号里，比如button(type="button")就对应<button type="button">
• 文本直接跟随：标签的文本内容直接写在标签后面就行，不用额外的包裹，像span.sr-only toggle navigation就完美对应带文本的span标签

这样写出来的Pug既简洁又和原始HTML的结构完全一致，你可以直接套用这个逻辑处理其他类似的嵌套标签哦～

内容的提问来源于stack exchange，提问作者ps23Rick