Jade的mixin用法

这天看老师的jade代码看到了mixin，前后文看看大致明白是个模板块一样的东西，但是不少细节不是很清楚，于是就上jade的网站去看了一下mixin的具体例子和方法，在这个blog里面记录一下。

mixin可以让你的代码变成可以复用的块。即是说可以在不同的地方里用到同样的块，只需要改变期中的参数即可，类似于模板的概念。

例1： 最简单的实例

//- Declarationmixin list  ul    li foo    li bar    li baz//- Use+list+list

创建一个名为list的mixin，由一个ul构成，然后+list表示创建一个list内的内容，编译后如下。

<ul>  <li>foo</li>  <li>bar</li>  <li>baz</li></ul><ul>  <li>foo</li>  <li>bar</li>  <li>baz</li></ul>

例2：同时他们可以编译成函数，可以获得参数。例如：

mixin pet(name)  li.pet= nameul  +pet('cat')  +pet('dog')  +pet('pig')

编译后如下。

<ul>  <li class="pet">cat</li>  <li class="pet">dog</li>  <li class="pet">pig</li></ul>

mixin pet可以接受一个名为name的参数，内容是li，li的class类的值被赋成name的值。通过传参可以用来区分不同的block.

例3：mixin还可以用一个jade的块来作为自己的内容。

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

编译后如下：

<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之后没有jade块，则会输出no content provided。这样一来mixin的用法简直就像是函数一样，十分的强大，复用性很强

例4：mixin从传递到mixin的属性获得隐式属性参数（好拗口）

mixin link(href, name)  //- attributes == {class: "btn"}  a(class!=attributes.class, href=href)= name+link('/foo', 'foo')(class="btn")

编译之后：

<a href="/foo" class="btn">foo</a>

你也可以使用 &attributes(在jade此页面的最后一段。http://jade-lang.com/reference/attributes/#and-attributes)

mixin link(href, name)  a(href=href)&attributes(attributes)= name+link('/foo', 'foo')(class="btn")

得到的一样的链接

<a href="/foo" class="btn">foo</a>

例5：其余的参数方式（下例是数组）

mixin list(id, ...items)  ul(id=id)    each item in items      li= item+list('my-list', 1, 2, 3, 4)

编译后如下：

<ul id="my-list">  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li></ul>

在mixin中用到了循环 each in。