article.html

<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>The </h1>World !!
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>This is my</p>
    <p>Amazing article</p>
  </div>
</div>

article.jade

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p No content provided

+article('Hello world')

+article('The ') World !!

+article('Hello world')
  p This is my
  p Amazing article

centered.html

<div class="centered bold">Hello world
</div>
<div class="centered red">
  <p>This is my</p>
  <p>Amazing article</p>
</div>

centered.jade

mixin centered
  .centered(class=attributes.class)
    block

+centered.bold Hello world

+centered.red
  p This is my
  p Amazing article

hello.html

<p>Hello World</p>
<p>The world !!</p>

hello.jade

mixin msgboard(msg)
  p #{msg}

mixin msgboard('Hello World')

+msgboard('The world !!')

link.html

<a class="menu highlight" href="#top">Top</a><a class="menu plain" id="sec1" href="#section1">Section 1</a><a class="menu plain" id="sec2" href="#section2">Section 2 </a><a class="menu plain" id="sec3" href="#section3">Section 3</a><a class="menu plain" id="sec3" href="#section4">Section 3</a>

link.jade

mixin link
  a.menu(attributes)
    block

+link.highlight(href="#top") Top
+link#sec1.plain(href="#section1") Section 1
+link#sec2.plain(href="#section2") Section 2
+link.plain(id="sec3", href="#section3") Section 3
+link#sec3(class="plain", href="#section4") Section 4

list.html

<div class="title">登場人物
</div>
<ul class="person" id="personList">
  <li>空条承太郎</li>
  <li>東方仗助</li>
  <li>ジョルノ・ジョバーナ</li>
  <li>空条徐倫</li>
  <li>ジョニィ・ジョースター</li>
  <li>東方定助</li>
</ul>
<div class="title">スタンド
</div>
<ul class="stand" id="standList">
  <li>スター・プラチナ</li>
  <li>クレイジー・ダイヤモンド</li>
  <li>ゴールド・エクスペリエンス</li>
  <li>ストーン・フリー</li>
  <li>タスク</li>
  <li>ソフト＆ウェット</li>
</ul>

list.jade

mixin list(arr)
  if block
    .title
      block
  ul(attributes)
    each item in arr
      li= item

+list(['空条承太郎', '東方仗助', 'ジョルノ・ジョバーナ', '空条徐倫', 'ジョニィ・ジョースター', '東方定助'])(id='personList', class='person') 登場人物
+list(['スター・プラチナ', 'クレイジー・ダイヤモンド', 'ゴールド・エクスペリエンス', 'ストーン・フリー', 'タスク', 'ソフト＆ウェット'])(id='standList', class='stand') スタンド

package.json

{
  "name": "jade-mixin-tips",
  "version": "0.0.1",
  "description": "jade mixin tips sample",
  "dependencies": {
    "jade": "0.27.7"
  },
  "devDependencies": {
  },
  "engines": {
    "node": ">= 0.8.16"
  }
}