Skip to content

Instantly share code, notes, and snippets.

@jonschlinkert
Created November 10, 2012 01:37
Show Gist options
  • Save jonschlinkert/4049428 to your computer and use it in GitHub Desktop.
Save jonschlinkert/4049428 to your computer and use it in GitHub Desktop.
jade

well cool, but how about large bodies of text:

yuck

p
  | foo bar baz
  | rawr rawr
  | super cool
  | go jade go

And this, why? CSS uses square brackets to target attributes, why use parentheses?

a(href='#')

Case

In Jade, the case statement takes the following form:

html
  body
    friends = 10
    case friends
      when 0
        p you have no friends
      when 1
        p you have a friend
      default
        p you have #{friends} friends

The fact that Jade supports case statements is awesome. But how readable is that, really? This is just a snippet, imagine dealing with a page of that.

HTML

start jade docs:

Inline html is fine, we can use the pipe syntax to write arbitrary text, in this case some html:

html
  body
    | <h1>Title</h1>
    | <p>foo bar baz</p>

Or we can use the trailing . to indicate to Jade that we only want text in this block, allowing us to omit the pipes:

html
  body.
    <h1>Title</h1>
    <p>foo bar baz</p>

Both of these examples yield the same result:

<html><body><h1>Title</h1>
<p>foo bar baz</p>
</body></html>

end jade docs...

I like that Jade supports inline HTML. That's a nice feature, we should strongly consider including this as well (noting that I'm also still on the fence about whether or not "text" should be acknowledged as an actual dom node):

html {
  body { text: "<h1>Title</h1> <p>foo bar baz</p>"; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment