Book Image

Web Development with Jade

By : Sean Lang
Book Image

Web Development with Jade

By: Sean Lang

Overview of this book

Table of Contents (16 chapters)

Block expansion


When each tag only has one tag nested under it, it can be a little annoying to have a new line for each one of them:

ul
  li.first
    a(href='#') foo
  li
    a(href='#') bar
  li.last
    a(href='#') baz

So, Jade has a feature called block expansion that lets us put those tags on the same line, meaning we can rewrite the preceding example as the following:

ul
  li.first: a(href='#') foo
  li: a(href='#') bar
  li.last: a(href='#') baz

The : (colon) after the tag name and attributes indicates that there is another tag following that one. We can even make really long chains of tags:

Jade

HTML

ul: li.first: b: a(href='#') foo
<ul>
  <li class="first">
    <b>
      <a href="#">foo</a>
    </b>
  </li>
</ul>

But that is really hard to read, so please, never do that unless you have a very good reason.