Mixin
mixin允许我们对某一个块的重复使用,类似于函数。
用法:首先声明mixin,然后使用(在mixin名字之前加+
即可以使用)即可。
最简单的mixin
jade:
//- 声明
mixin list
ul
li foo
li bar
li baz
//- 使用
+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
mixin支持传入参数,根据参数来改变块内容。
jade:
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块
mixin使用时,也可以包含一个块。通过判断,可以使内容不同。
jade:
mixin article(title)
.article
.article-wrapper
h1= title
//- 如果mixin含有块,则为块内容
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 attributes
jade允许将隐性属性变量传入mixin
。
jade:
mixin link(href, name)
a(class!=attributes.class, href=href, id!=attributes.id)= name
+link('/foo', 'foo')(class="btn" id="qaq")
html:
<a href="/foo" class="btn" id="qaq">foo</a>
在jade代码中,因为class属性和id属性已经逃逸,所以在mixin中需要使用!=
,或者也可以使用&attributes
。
多参数
jade的mixin的形参可以为多个,即使未知多少个也可以。
jade:
mixin list(...name)
each i in name
p my name is #{i}
+list('Tom', 'Jack', 'Jim', 'Alice', 'Allen')
html:
<p>my name is Tom</p>
<p>my name is Jack</p>
<p>my name is Jim</p>
<p>my name is Alice</p>
<p>my name is Allen</p>