I have created a jade email template that includes a mixin file with the header mixin. This mixin should be present in all emails. Although it is included properly, the issue arises due to the nesting level within it (3 levels deep), causing anything placed after the mixin to lose its intended nesting.
views/mixins/email.jade
mixin header(siteLogo)
div(style='margin-bottom: 20px; border: 1px solid #ddd; padding: 20px; width: 50%; margin: 0 auto 20px;')
div(style='text-align: center; border-bottom: 1px solid #EEE; padding-bottom: 10px;')
img(src='#{siteLogo}', style='text-align: center;')
views/emails/forgot_password.jade:
include ../mixins/email
+header(siteLogo)
p
| Hi #{name},
p
| Welcome to the site!
The generated email html looks like this:
<div style="margin-bottom:20px;border:1px solid #ddd;padding:20px;width:50%;margin:0 auto 20px">
<div style="text-align:center;border-bottom:1px solid #eee;padding-bottom:10px">
<img src="path/to/image/logo" style="text-align:center">
</div>
<p>Hi BobCobb</p>
<p>Welcome to the site!</p>
However, I want both of those paragraph tags to be inside the main <div> element as follows:
<div style="margin-bottom:20px;border:1px solid #ddd;padding:20px;width:50%;margin:0 auto 20px">
<div style="text-align:center;border-bottom:1px solid #eee;padding-bottom:10px">
<img src="path/to/image/logo" style="text-align:center">
</div>
<p>Hi BobCobb</p>
<p>Welcome to the site!</p>
</div>