Skip to content

Commit

Permalink
update jade
Browse files Browse the repository at this point in the history
  • Loading branch information
tj committed Apr 19, 2012
1 parent ec2f445 commit d53c386
Showing 1 changed file with 66 additions and 0 deletions.
66 changes: 66 additions & 0 deletions jade.md
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -368,3 +368,69 @@
ul#letters ul#letters
for letter in ['a', 'b', 'c'] for letter in ['a', 'b', 'c']
li= letter li= letter

## Mixins

Mixins provide a way to define jade "functions" which "mix in"
their contents when called. This is useful for abstracting
out large fragments of Jade.

The simplest possible mixin which accepts no arguments might
look like this:

mixin hello
p Hello

You use a mixin by placing `+` before the name:

+hello

For something a little more dynamic, mixins can take
arguments, the mixin itself is converted to a javascript
function internally:

mixin hello(user)
p Hello #{user}

+hello('Tobi')

Yields:

<p>Hello Tobi</p>

Mixins may optionally take blocks, when a block is passed
its contents becomes the implicit `content` argument. For
example here is a mixin passed a block, and also invoked
without passing a block:

mixin article(title)
.article
.article-wrapper
h1= title
if content
!= content
else
p No content provided
+article('Hello world')
+article('Hello world')
p This is my
p Amazing article

yields:

<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>No content provided</p>
</div>
</div>

<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>This is my</p>
<p>Amazing article</p>
</div>
</div>

0 comments on commit d53c386

Please sign in to comment.