Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

update jade

  • Loading branch information...
commit d53c38616c85b7d2929266b903ae7a12166fd289 1 parent ec2f445
@tj authored
Showing with 66 additions and 0 deletions.
  1. +66 −0 jade.md
View
66 jade.md
@@ -368,3 +368,69 @@
ul#letters
for letter in ['a', 'b', 'c']
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>
Please sign in to comment.
Something went wrong with that request. Please try again.