Jade 是HTML預(yù)處理語言，省略了大量的尖括號(hào)溢十，簡潔诉植，高效
參考網(wǎng)址：Jade的使用
Doctype
doctype html
生成的HTML：
<!DOCTYPE html>
其他常用類型還有： doctype xml, doctype transitional, doctype strict
標(biāo)簽
標(biāo)簽是 HTML 的核心元素届腐，Jade對(duì)縮進(jìn)敏感，可以根據(jù)縮進(jìn)劃分層次結(jié)構(gòu)往核，省略一些界定符號(hào)（大括號(hào)箫爷、尖括號(hào)......）。
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>
提示：一定要保持一致的縮進(jìn)格式，建議統(tǒng)一將
tab鍵輸出為空格虎锚，并采用4個(gè)空格為標(biāo)準(zhǔn)縮進(jìn)硫痰。
縮進(jìn)
Jade 支持兩種注釋：單行注釋和多行注釋，每種注釋支持兩種模式：輸出到源文件和不輸出到源文件窜护，差別在于多了一個(gè) -效斑。
創(chuàng)建一個(gè)單行輸出注釋和單行不輸出注釋:
// 這個(gè)單行注釋會(huì)輸出到編譯后的文件中
p 單行輸出注釋
//- 這個(gè)單行注釋不會(huì)輸出到編譯后的文件中
p 單行不輸出注釋
生成的HTML:
<!-- 這個(gè)單行注釋會(huì)輸出到編譯后的文件中-->
<p>單行輸出注釋</p>
<p>單行不輸出注釋</p>
相比起單行注釋柱徙，多行注釋的內(nèi)容要在注釋符號(hào)的下一行，以相同的縮進(jìn)來編寫护侮。
//
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
p 多行輸出注釋
//-
這個(gè)多行注釋不會(huì)輸出到編譯后的文件中
這個(gè)多行注釋不會(huì)輸出到編譯后的文件中
p 多行不輸出注釋
生成的HTML:
<!--
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
-->
<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>
對(duì)于頻繁使用的類名和ID名滨溉，Jade提供了兩個(gè)字面量：類名字面量和ID字面量，若不在字面量前指定標(biāo)簽名晦攒，則默認(rèn)使用 div
.link
a.link
#button
a#button
生成的HTML:
<div class="link"></div>
<a class="link"></a>
<div id="button"></div>
<a id="button"></a>
另一個(gè)常被修改的屬性是 style, 為了方便修改該屬性涧卵，Jade接收一個(gè)類似JavaScript對(duì)象類型的參數(shù)：
a(style={color: 'red', background: 'green'})
生成的HTML：
<a style="color:red;background:green"></a>
為方便的添加其他自定義屬性腹尖，Jade特意增加一個(gè)語法格式 &attributes :
- var attributes = {'data-foo': 'bar'};
div#foo(data-bar="foo")&attributes(attributes)
生成的HTML:
<div id="foo" data-bar="foo" data-foo="bar"></div>
另外，還可以根據(jù)條件設(shè)置屬性的語法形式：
- 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支持三種文本輸出方式：單行文本热幔、管道文本和多行文本：
// 單行文本內(nèi)容直接跟在標(biāo)簽名后面
p 這里是單行文本內(nèi)容
// 管道文本使用管道符
p
| 這是一行管道文本乐设，行數(shù)無限制
| 這是一行管道文本，行數(shù)無限制
| 這是一行管道文本绎巨，行數(shù)無限制
| ......
// 多行文本需要在標(biāo)簽名后添加點(diǎn)號(hào)
p.
這是多行文本近尚，注意縮進(jìn)
這是多行文本，注意縮進(jìn)
這是多行文本场勤，注意縮進(jìn)
......
生成的HTML:
<!-- 單行文本內(nèi)容直接跟在標(biāo)簽名后面 -->
<p>這里是單行文本內(nèi)容</p>
<!-- 管道文本使用管道符 -->
<p>
這里是一行管道文本，行數(shù)無限制
這里是一行管道文本，行數(shù)無限制
這里是一行管道文本赏廓，行數(shù)無限制
......
</p>
<!-- 多行文本需要在標(biāo)簽名后添加點(diǎn)號(hào) -->
<p>
這里是一行管道文本狠鸳，行數(shù)無限制
這里是一行管道文本，行數(shù)無限制
這里是一行管道文本留瞳，行數(shù)無限制
......
</p>
代碼嵌入
將JavaScript嵌入到Jade中拒迅，共3種方法：
① 使用 -,代碼中的特殊字符不會(huì)被轉(zhuǎn)義：
-for (var i=0; i<3; i++)
li <a></a>
生成的HTML:
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
② 使用 =，代碼中的特殊字符將會(huì)轉(zhuǎn)義：
p
= 'This code is <escaped>!'
生成的HTML:
<p>this is <escaped;>!</p>
③ 使用 !=，代碼中的特殊字符不會(huì)被轉(zhuǎn)義：
p
!= 'This code is <escaped>!'
生成的HTML:
<p>this is <escaped>!</p>
插值語法
Jade 提供了字符串插值和標(biāo)簽插值璧微，其中字符串插值要考慮到安全性問題作箍，所以又分成轉(zhuǎn)義和不轉(zhuǎn)義兩種情況：
// 轉(zhuǎn)義字符串插值 #{}
- var theGreat = "<span>escape!</span>";
p This will be safe: #{theGreat}
// 不轉(zhuǎn)義字符串插值 !{}
- var theGreat = "<span>escape!</span>";
p This will be safe: !{theGreat}
// 標(biāo)簽插值
p #[a(href="jade-lang.com") Jade]
生成的HTML:
<!-- 轉(zhuǎn)義字符串插值 #{} -->
<p>This will be safe: <span>escape!</span></p>
<!-- 不轉(zhuǎn)義字符串插值 !{} -->
<p>This will be safe: <span>escape!</span></p>
<!-- 標(biāo)簽插值 -->
<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還提供了一個(gè) unless條件語句前硫，它會(huì)判斷條件是否不符合要求胞得，若不符合，則執(zhí)行下一步开瞭。
- 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 的語法懒震，對(duì)于所有的條件默認(rèn)只有一種輸出結(jié)果，如果沒有符合條件的就輸出defualt 中的內(nèi)容嗤详，但有一種特例：
- var friends = 0
case friends
when 0
when 1
default p you have #{friends} friends
生成的HTML:
<p>you have very 0 friends</p>
上面的示例可以看出个扰，當(dāng)沒有可輸出內(nèi)容時(shí)，就會(huì)執(zhí)行向下查找可執(zhí)行語句葱色，一直到 default
遍歷語句
Jade使用 each 對(duì)數(shù)組和對(duì)象遍歷递宅，用法與JavaScript大同小異。
// 遍歷數(shù)組
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
// 遍歷對(duì)象
ul
each val, index in {1:'one',2:'two',3:'three'}
li= index + ': ' + val
生成的 HTML:
<!-- 遍歷數(shù)組 -->
<ul>
<li>0: zero</li>
<li>1: one</li>
<li>2: two</li>
</ul>
<!-- 遍歷對(duì)象 -->
<ul>
<li>1: one</li>
<li>2: two</li>
<li>3: three</li>
</ul>
循環(huán)語句
Jade 使用 while 實(shí)現(xiàn)循環(huán)苍狰，用法與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）都是舉足輕重的語法，混合宏具有復(fù)用淋昭、解耦、可讀英融、可擴(kuò)驶悟、可維護(hù)等優(yōu)勢(shì)材失。創(chuàng)建混合宏需要使用 mixin 標(biāo)識(shí)符龙巨，創(chuàng)建混合宏實(shí)例時(shí)旨别，需要使用 + 標(biāo)識(shí)符：
//- 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>
上面是最基本的混合宏昼榛，給它傳遞參數(shù)剔难，才能讓它更有通用性：
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>
此外，還可以使用 ... 標(biāo)識(shí)符表示不定數(shù)量的參數(shù)：
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>
有時(shí)候偶宫，我們需要替換混合宏的某個(gè)部分纯趋，就可以使用 block 標(biāo)識(shí)符來占位：
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>
有關(guān)屬性的混合宏吵冒，其中一種是：
mixin link(href, name)
a(href=href)&attributes(attributes)= name
+link('/foo', 'foo')(class="btn")
生成的 HTML:
<a href="/foo" class="btn">foo</a>
上面混合宏中并沒有聲明 attributes痹栖，是因?yàn)?Jade 已經(jīng)隱式為其引用了所有傳遞給 &attributes 的參數(shù)
includes
實(shí)現(xiàn)高度復(fù)用的一種方式是將代碼片段保存到不同文件中揪阿，然后在需要的地方導(dǎo)入這些片段南捂，為此溺健，Jade 提供了 include 指令钮蛛。下面是一個(gè) 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 標(biāo)識(shí)符渣刷，可以設(shè)置一個(gè)可修改的代碼片段矗烛，緊跟之后的是該代碼片段的名字：
//- layout.jade
doctype html
html
head
block title
title Default title
body
block content
然后，在 index 頁面繼承 layout, 并可以根據(jù)代碼片段的名字修改相關(guān)代碼：
//- 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>
上面的繼承方式涣旨，會(huì)抹除原來代碼片段的部分霹陡，如果想要追加代碼片段，可以使用 append 和 prepend 指令烹棉。 append 用于在原來代碼片段之后追加浆洗，prepend 用于在原有代碼之前追加旅薄，一個(gè)初始頁面：
//- 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>
