jade是源于NodeJS的html模板引擎。通过使用jade，我们可以大量的减少重复代码的书写，大大提高代码书写效率。

jade

安装

Jade 是基于 Node 的，所以，在 Node 中安装 Jade 的方法如下：
npm install jade -g

语法

声明（不区分大小写）：可以写成

doctype

或者

!!!

也可以直接添加文本类型的书写，或带上扩展说明。

标签：

• 不需要使用 <> 进行围绕，不需要闭合标签；
• 使用缩进代表嵌套，每缩进一次，代表一级嵌套；
• 使用 #id 代替id="id"；
• 使用 .class 代替 class="class" ；
• 可以在id属性值后直接接class的属性值；
• div 元素可以省略 div ,直接写id或者class值。

• 其他属性写在标签后，用 () 进行围绕，属性写法同HTML的写法。

  body
      #con
          img#id.class1.class2
          span.class 
          input(type="text",value="姓名",name="user[name]")
  

文本：

• 单行文本可以直接把内容放在标签后面（空格）；

  h2.title 第一次JADE
  

• 多行文本

  p#id
      |aaaaa
      |bbbbb
      |ccccc
  

  或

  p#id.
      aaaaa
      bbbbb
      ccccc
  

• 需要转义的字符，使用 \ 进行转义。

• 变量，使用 #{}

注释：

• 单行注释 \\
• 不输出的注释 \\-
• 条件注释 \\if IE

• 块注释

  #con
      //
          img#id.class1.class2
          span.class 
  

case：选中输出。

friends=10
case friends
    when 0
        p you have no friend
    when 2
        p you have less friends
    when 5
        p you have many friends
    default
        p you have #{friends} friends

以 - 开头的第三种可执行代码，这种语句不会输出，-与代码之间一定要有空格。 = 直接返回文本值； h1=foo 返回 <h1>foo</h1>；

- var foo="bar"
    =foo
    h1=foo

循环：

ul
    - var items = ["one", "two", "three"]
    each item,i in items
        li= #{item}:#{i}

渲染为

<ul>
    <li>one:0</li>
    <li>two:1</li>
    <li>three:2</li>
</ul>

条件语句：

- var user={des:'foo and bar'}
#user
    if user.des
        h2 Description
        p.description= user.des
    else
        h1 Description
        p.description User have no dec

Mixins：用 mixin 声明，用 +调用。

• 无参数：

  mixin list
      ul
          li foo
          li fsjs
          li gsgsg
  +list
  

• 参数个数较少时，直接在声明后添加参数名。

  mixin pet(name)
      li.pet=name
  ul
      +pet("cat")
      +pet("dog")
      +pet("pig")
  

• 参数个数较多时，用 ... 代替多个参数。

  mixin lists(id, ...items)
      ul(id=id)
          each item in items
              li=item
  +lists("my_list",1,2,3,4,5)