我试图理解Jade中的缩进是如何工作的。
div(class="p")
div(class="c")
p x
p y
p z
呈现为
<div class="p">
<div class="c">
<p>x</p>
</div>
<p>y</p>
<p>z</p>
</div>
有人可以解释为什么Jade在不同级别呈现x和y，但y和z处于同一级别？
修改
将li代码更改为p代码。问题不在于推出正确的HTML。我试图了解Jade是如何在幕后工作的。即使只有单级缩进有效，我也不会从Jade获取错误或警告以使用多级缩进。
因为这个我想知道Jade如何解释/处理多级缩进，所以我把上面作为一个玩具示例来理解。
另一个类似的例子可能是：
div(id="1")
div(id="2")
div(id="3")
div(id="4")
呈现为
<div id="1">
<div id="2"></div>
</div>
<div id="3">
<div id="4"></div>
</div>
在这种情况下，<div id="3"></div>不会呈现为<div id="2"></div>的孩子，但<div id="4"></div>会呈现为<div id="3"></div>的孩子。
答案 0 :(得分：1)
一般情况下，根据Jade的说法，如果我们要讨论嵌套元素（或div，如果是这样的话），那么一次只能在一个级别更深（不是外部）缩进。你最好使用HTML）。
也就是说，在你的例子中定义x之后，Jade所期望的是要么进入内部水平，要么继续保持同一水平。相反，你之前得到了一个级别，这是无效的。
另外，在旁注中，您应该将li元素包含在列表元素中（即ul，ol），因此正确的格式应如下所示：
div(class="p")
div(class="c")
ul
li x
li y
li z
如需进一步参考，请考虑阅读official docs或更好的情况，例如，nesting示例。
修改
以上表示一般用途，但也应该考虑的是，编译器看到你的嵌套缩进在div(id="2")之后被放弃了。这是正确的，因为你指定的是div(id="3")是一个外层。
我的意思是，编译器理解你已经完成了第二个元素的嵌套。因此，它认为您只是在编辑器中对齐不匹配，而是将div(id="3")置于与div(id="1")相同的垂直级别，您将其放置在内部，但仍然在div(id="2")之前，表示您已完成div(id="1")的嵌套，根据我在编辑帖子之前提到的内容（＆＃34;更深一级＆＃34;）。
随后，将div(id="3")放在与div(id="1")相同的级别，使他应用通用（以及我们最容易理解的）缩进规则（div(id="4")嵌套元素div(id="3")的{{1}}，而div(id="3")的外部是div(id="4")。
所以，它就像是一步一步的编译。
总而言之，以下是html标记的编译步骤和结构：
div(id="2")是div(id="1") - ＆gt;的嵌套元素好的，为第一个元素创建一个嵌套的html标记，简单如下：
<div id="1">
<div id="2"></div>
</div>
div(id="3")嗯它与div(id="2")不在同一级别。内心更多吗？不，还有更多吗？是的，所以它可能是父元素，就像div(id="1")一样，所以我会与div(id="1")
更新的html是：
<div id="1">
<div id="2"></div>
</div>
<div id="3">
</div>
<div id="4">。这是关于什么的？它的缩进与div(id="3")仍然是一样的（哦，天哪，他们不遵守我的规则），但我只是认为div(id="3")是父母（在同一个地方）使用div(id="1")）元素的级别，因此，因为这个是我对div(id="3")（对于父元素）的考虑更多，我将div(id="4")视为{div(id="3")的嵌套元素1}}。因此，它更新为
<div id="3">
<div id="4"></div>
</div>
对于整个文档，表示如下更新：
<div id="1">
<div id="2"></div>
</div>
<div id="3">
<div id="4"></div>
</div>
首先需要理解的是，从Jade的编译器角度来看，我们所考虑的差距并没有以同样的方式处理（即编辑器选项卡并不总是像他们认为的那样生成嵌套元素从人类的头脑中，第一次接触到玉石。