Pugの連続ネストをインデントなしで書く

pugの連続ネストは省略できるよ

pugはネストが深くなると見づらい、というよくあるやつ、
: で繋げばインデントいらないです。

<div class="wrapper">
  <div class="contents">
    <div class="block">
      <p class="main">
        hoge
      </p>
    </div>
  </div>
</div>

⬆
こんな感じのhtmlを作るときは、

.wrapper
  .contents
    .block
      p.main hoge

⬆
ではなく、

.wrapper: .contents: .block: p.main hoge

⬆
: で繋げる。

連続ネストではない場合は注意

<div class="wrapper">
  <div class="contents">
    <p class="sub">hogehoge</p>
    <div class="block">
      <p class="main">hoge</p>
    </div>
  </div>
</div>

⬆
Q. じゃあ、こういう感じで、連続ネストじゃない場合の省略記法は？
A. 中に何かコンテンツが入っている場合は無理

.wrapper: .contents
  p.sub hogehoge
  .block: p.main hoge