Pug newbie here -- I'm in the process of implementing repetitive html in pug just to get my feet wet. I've got the following HTML that I'm trying to capture in pug and having an issue with spans. I've stripped non-relevant class and other stuff from the example below to simplify.
Original 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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</nav>
Pug Equivalent description :
nav(class='...')
div(class='container')
div(class='navbar-header')
button(type='button')
span(class='sr-only') toggle navigation
Pug Generated HTML :
<nav class="...">
<div class="container">
<div class="navbar-header">
<button type="button"><span class="sr-only">toggle navigation</span></button>
</div>
</div>
</nav>
I realize it's syntactically the same but what am I doing that is triggering it to do the span on the same line with the button (its parent in the DOM). Call me odd, but I like to be able to have easy to read HTML and yes I'm generating this using the "--pretty" option.. I just want to understand why its doing it.. thoughts??
This is with pug 2.0.3 if it matters.
thanks @Sean! I am delving into some of these tools that I've never had the opportunity to use before so there's a bit of a learning curve for me.
I'd give you credit for the answer but am not frankly sure how to do so..