前言
開始使用Jade已經是4年前的事了，這期間也有使用，但比較少，使用的功能也比較簡單。最近因項目需要，進行了Jade的溫故。這篇文章整理的比較全面，所以進行了轉載：https://www.jianshu.com/p/05ed25bfc2c5
Jade語法整理
Jade 是HTML預處理語言，省略了大量的尖括號，簡潔，高效
參考網址：Jade的使用
Doctype
doctype html
生成的HTML：
<!DOCTYPE html>
其他常用類型還有： doctype xml, doctype transitional, doctype strict
標籤
標籤是 HTML 的核心元素，Jade對縮進敏感，可以根據縮進劃分層次結構，省略一些界定符號（大括號、尖括號…）。
ul
li Item A
li Iten B
li Item C
生成的HTML：
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
提示：一定要保持一致的縮進格式，建議統一將tab鍵輸出爲空格，並採用4個空格爲標準縮進。
縮進
Jade 支持兩種註釋：單行註釋和多行註釋，每種註釋支持兩種模式：輸出到源文件和不輸出到源文件，差別在於多了一個 -。
創建一個單行輸出註釋和單行不輸出註釋:
// 這個單行註釋會輸出到編譯後的文件中
p 單行輸出註釋
//- 這個單行註釋不會輸出到編譯後的文件中
p 單行不輸出註釋
生成的HTML:
<!-- 這個單行註釋會輸出到編譯後的文件中-->
<p>單行輸出註釋</p>
<p>單行不輸出註釋</p>
相比起單行註釋，多行註釋的內容要在註釋符號的下一行，以相同的縮進來編寫。
//
這個多行註釋會輸出到編譯後的文件中
這個多行註釋會輸出到編譯後的文件中
p 多行輸出註釋
//-
這個多行註釋不會輸出到編譯後的文件中
這個多行註釋不會輸出到編譯後的文件中
p 多行不輸出註釋
生成的HTML:
<!--
這個多行註釋會輸出到編譯後的文件中
這個多行註釋會輸出到編譯後的文件中
-->
<p>多行輸出註釋</p>
<p>多行不輸出註釋</p>
屬性
在Jade 中填寫屬性，基本上和HTML保持一致：
input(type='checkout', checked)
input(
type='checkbox'
name='agreement'
checked
)
生成的HTML:
<input type="checkbox" checked>
<input type="checkbox" name="agreement" checked>
對於頻繁使用的類名和ID名，Jade提供了兩個字面量：類名字面量和ID字面量，若不在字面量前指定標籤名，則默認使用 div
.link
a.link
#button
a#button
生成的HTML:
<div class="link"></div>
<a class="link"></a>
<div id="button"></div>
<a id="button"></a>
另一個常被修改的屬性是 style, 爲了方便修改該屬性，Jade接收一個類似JavaScript對象類型的參數：
a(style={color: 'red', background: 'green'})
生成的HTML：
<a style="color:red;background:green"></a>
爲方便的添加其他自定義屬性，Jade特意增加一個語法格式 &attributes :
- var attributes = {'data-foo': 'bar'};
div#foo(data-bar="foo")&attributes(attributes)
生成的HTML:
<div id="foo" data-bar="foo" data-foo="bar"></div>
另外，還可以根據條件設置屬性的語法形式：
- var authenticated= true
body(class=authenticated ? 'authed' : 'anon')
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About
生成的HTML:
<body class="authed"></body>
<a href="/">Home</a><a href="/about" class="active"></a>
文本
Jade支持三種文本輸出方式：單行文本、管道文本和多行文本：
// 單行文本內容直接跟在標籤名後面
p 這裏是單行文本內容
// 管道文本使用管道符
p
| 這是一行管道文本，行數無限制
| 這是一行管道文本，行數無限制
| 這是一行管道文本，行數無限制
| ......
// 多行文本需要在標籤名後添加點號
p.
這是多行文本，注意縮進
這是多行文本，注意縮進
這是多行文本，注意縮進
......
生成的HTML:
<!-- 單行文本內容直接跟在標籤名後面 -->
<p>這裏是單行文本內容</p>
<!-- 管道文本使用管道符 -->
<p>
這裏是一行管道文本，行數無限制
這裏是一行管道文本，行數無限制
這裏是一行管道文本，行數無限制
......
</p>
<!-- 多行文本需要在標籤名後添加點號 -->
<p>
這裏是一行管道文本，行數無限制
這裏是一行管道文本，行數無限制
這裏是一行管道文本，行數無限制
......
</p>
代碼嵌入
將JavaScript嵌入到Jade中，共3種方法：
① 使用 -,代碼中的特殊字符不會被轉義：
-for (var i=0; i<3; i++)
li <a></a>
生成的HTML:
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
② 使用 =，代碼中的特殊字符將會轉義：
p
= 'This code is <escaped>!'
生成的HTML:
<p>this is <escaped;>!</p>
③ 使用 !=，代碼中的特殊字符不會被轉義：
p
!= 'This code is <escaped>!'
生成的HTML:
<p>this is <escaped>!</p>
插值語法
Jade 提供了字符串插值和標籤插值，其中字符串插值要考慮到安全性問題，所以又分成轉義和不轉義兩種情況：
// 轉義字符串插值 #{}
- var theGreat = "<span>escape!</span>";
p This will be safe: #{theGreat}
// 不轉義字符串插值 !{}
- var theGreat = "<span>escape!</span>";
p This will be safe: !{theGreat}
// 標籤插值
p #[a(href="jade-lang.com") Jade]
生成的HTML:
<!-- 轉義字符串插值 #{} -->
<p>This will be safe: <span>escape!</span></p>
<!-- 不轉義字符串插值 !{} -->
<p>This will be safe: <span>escape!</span></p>
<!-- 標籤插值 -->
<p><a href="jade-lang.com"></a></p>
條件語句
最基本的條件語句：if … else if … else:
- var user = { description: 'foo bar baz' }
- var authorised = false
#user
if user.description
h2 Description
p.description= user.description
else if authorised
h2 Description
p.description.
User has no description,
why not add one...
else
h1 Description
p.description User has no description
生成的HTML:
<div id="user">
<h2>Description</h2>
<p class="description">foo bar baz</p>
</div>
此外，Jade還提供了一個 unless條件語句，它會判斷條件是否不符合要求，若不符合，則執行下一步。
- var con = false
unless con
p Hellp, World
生成的HTML:
<p>Hello, World</p>
分支語句
Jade中提供了類似switch語法 – case:
- var friends = 10
case friends
when 0
p you have no friends
when 1
p you have a friend
default
p you have #{friends} friends
生成的HTML：
<p>you have 10 friends</p>
注意：在Jade中並沒有提供類似break 的語法，對於所有的條件默認只有一種輸出結果，如果沒有符合條件的就輸出defualt 中的內容，但有一種特例：
- var friends = 0
case friends
when 0
when 1
default p you have #{friends} friends
生成的HTML:
<p>you have very 0 friends</p>
上面的示例可以看出，當沒有可輸出內容時，就會執行向下查找可執行語句，一直到 default
遍歷語句
Jade使用 each 對數組和對象遍歷，用法與JavaScript大同小異。
// 遍歷數組
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
// 遍歷對象
ul
each val, index in {1:'one',2:'two',3:'three'}
li= index + ': ' + val
生成的 HTML:
<!-- 遍歷數組 -->
<ul>
<li>0: zero</li>
<li>1: one</li>
<li>2: two</li>
</ul>
<!-- 遍歷對象 -->
<ul>
<li>1: one</li>
<li>2: two</li>
<li>3: three</li>
</ul>
循環語句
Jade 使用 while 實現循環，用法與JavaScript相似：
- var n = 0;
ul
while n < 4
li= n++
生成的 HTML:
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
mixins
在 Scss 和 Jade 中，混合宏（mixins）都是舉足輕重的語法，混合宏具有複用、解耦、可讀、可擴、可維護等優勢。創建混合宏需要使用 mixin 標識符，創建混合宏實例時，需要使用 + 標識符：
//- Declaration
mixin list
ul
li foo
li bar
li baz
//- Use
+list
+list
生成的 HTML:
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
上面是最基本的混合宏，給它傳遞參數，才能讓它更有通用性：
mixin pet(name)
li.pet= name
ul
+pet('cat')
+pet('dog')
+pet('pig')
生成的 HTML:
<ul>
<li class="pet">cat</li>
<li class="pet">dog</li>
<li class="pet">pig</li>
</ul>
此外，還可以使用 … 標識符表示不定數量的參數：
mixin list(id, ...items)
ul(id=id)
each item in items
li= item
+list('my-list', 1, 2, 3, 4)
生成的 HTML:
<ul id="my-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
有時候，我們需要替換混合宏的某個部分，就可以使用 block 標識符來佔位：
mixin article(title)
.article
.article-wrapper
h1= title
if block
block
else
p No content provided
+article('Hello world')
+article('Hello world')
p This is my
p Amazing 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>Hello world</h1>
<p>This is my</p>
<p>Amazing article</p>
</div>
</div>
有關屬性的混合宏，其中一種是：
mixin link(href, name)
a(href=href)&attributes(attributes)= name
+link('/foo', 'foo')(class="btn")
生成的 HTML:
<a href="/foo" class="btn">foo</a>
上面混合宏中並沒有聲明 attributes，是因爲 Jade 已經隱式爲其引用了所有傳遞給 &attributes 的參數
includes
實現高度複用的一種方式是將代碼片段保存到不同文件中，然後在需要的地方導入這些片段，爲此，Jade 提供了 include 指令。下面是一個 index 頁面：
//- index.jade
doctype html
html
include ./includes/head.jade
body
h1 My Site
p Welcome to my super lame site.
include ./incliudes/foot.jade
head 代碼片段：
//- includes/head.jade
head
title My Site
script(src='/javascripts/jquery.js')
script(src='/javsscripts/app.js')
footer 代碼片段：
//- includes/foot.jade
#footer
p Copyright (c) footer
生成的 HTML:
<!doctype html>
<html>
<head>
<title>My Site</title>
<script src='/javascripts/jquery.js'></script>
<script src='/javsscripts/app.js'></script>
</head>
<body>
<h1>My Site</h1>
<p>Welcome to my super lame site.</p>
<div id="footer">
<p>Copyright (c) footer</p>
</div>
</body>
</html>
繼承
Jade 中使用 extends 來繼承代碼片段，與 include 本分地引用代碼段不同，繼承可以修改代碼片段。
首先，在 layout 頁面使用 block 標識符，可以設置一個可修改的代碼片段，緊跟之後的是該代碼片段的名字：
//- layout.jade
doctype html
html
head
block title
title Default title
body
block content
然後，在 index 頁面繼承 layout, 並可以根據代碼片段的名字修改相關代碼：
//- index.jade
extends ./layout.jade
block title
title Article Title
block content
h1 My Article
生成的 HTML:
<!doctype html>
<html>
<head>
<title>Article Title</title>
</head>
<body>
<h1>My Article</h1>
</body>
</html>
上面的繼承方式，會抹除原來代碼片段的部分，如果想要追加代碼片段，可以使用 append 和 prepend 指令。 append 用於在原來代碼片段之後追加，prepend 用於在原有代碼之前追加，一個初始頁面：
//- layout.jade
doctype html
html
head
title Layout
body
block content
p Hello
生成的 HTML:
<html>
<head>
<script src="/vendor/jquery.js"></script>
<script src="/vendor/caustic.js"></script>
</head>
<body>
<p>Hello</p>
<p>World</p>
</body>
</html>
使用 prepend :
extend layout
block prepend content
p World
生成的 HTML：
<html>
<head>
<script src="/vendor/jquery.js"></script>
<script src="/vendor/caustic.js"></script>
</head>
<body>
<p>World</p>
<p>Hello</p>
</body>
</html>