jade: if statements and nesting

Answer 1

Jade doesn't seem to have a built in solution to start and end the tags other than utilizing the 'pipe' character to render plain text.

- if(mode === 'fixed') {
| <div id="tabbar">
- }
| <p>I cannot get this to be an inner element :(</p>
- if(mode === 'fixed') {
| </div>
- }

Less cluttered solution -

div(class=(isFixed) ? 'fixed' : '')
  p inner element

Answer 2

You need to separate control flow from the template. Try this:

divClass = null

if isFixed
   divClass = "fixed"

div(class=divClass)
   p inner element

Which in turn might suggest factoring out the "isFixed" parameter into the actual divClass parameter to be passed on. But that depends on your remaining code/template of course.

---

As an alternative, try a mixin:

mixin content
  p inner element

if (isFixed)
  div(class="test")
    mixin content
else
  div(class="other")
    mixin content

Answer 3

I would approach this with a ternary (or fully written out conditional or method) to determine the class attribute. That allows you to keep the div on one line and keeps indentation like it would be for any other element:

div(class="#{ isFixed ? 'fixed' : '' }")
    p Inner Element