jade （pug）
丁均
【jade】
编译：jade name.jade 编译成压缩后的html
jade -P name.jade 有缩进
jade -P -w name.jade 实时编译
语法：
1.子标签相对于父标签，缩进两个空格，标签与内容缩进一个空格
2.添加class，id 可在标签后直接添加例如（h1.class#id <==><h1 class = "class" id = "id"></h1>）div可省略标签名（.class#id <==> <div class="class" id="id"></div>）;
对于其他属性，在标签后的括号内写明即可（a(href = "http://www.baidu.com") <==> <a href="http://www.baidu.com"></a>）
3.对于大段文本，可以在标签后紧贴'.'(注意是紧贴，否则'.'也会被当成文本)，然后另起一行输入正常的文本（可以有html成对的标签）。（或：'|'表示换行，嵌套标签写法遵循jade语法规律 ）
4.注释：
单行注释：// <==> <!-- -->
非缓冲注释：//- 不会编译到html
块注释：//-
p balabala~~ 注释上层即注释上层包含的全部标签内容
IE注释：<!--[if IE 8]>balabala~<![end if]-->
5.变量赋值与替换：
jade name.jade -P -w --obj "{'course':'hello'}" (命令行传值)
jade name.jade -P -w -O name.json (json文件传值)
- var course = "jade" (文档声明变量，优先级最高)
变量替换：#{course.toUpperCase()}
6.转义与非转义：
转义（不保留变量中原始标签）： #{变量名} 或者 标签名= 变量名（p= 变量名）
非转义（保留变量中原始标签） ：!{变量名} 或者 标签名!= 变量名(p!= 变量名)
对于#{}或者!{}通过反斜线'\'表示（\#{something} <==> #{something}）
input(value=data)，当data无值是为空
7.循环语句：
while循环：
- var n = 0
ul
while(n < 4)
li= n++
for循环：
- var course = { course: 'jade',level: 'high'}
- for （var k in course）
p= course[k]
each循环：
- each value,key in course
p #{key}: #{value}
遍历数组：
- var courses = ['node','jade','express']
each item in courses
p= item
嵌套循环：
- var sections = [{id: 1,items:['a','b']},{id: 2,items:['c','d']}]
dl
each section in sections.length > 0?sections : [{id: 0,items:['none']}]
dt= section.id
each item in section.items
dd= item
8.条件语句：
if-else：
if 表达式
....
else if 表达式
.....
else
......
unless：
unless 表达式（表达式值为false执行）
.......
case-when（类似于switch-case）：
case 变量
when 'balabala~' : .......
when 'balabala~' : .......
when 'balabala~' : .......
...
default
.....
9.mixin
普通mixin：
声明： mixin name
p jade study
调用：+name
带参数的mixin：
声明：
mixin study(name,courses)
p #{name}
ul.courses
each course in courses
li= course
调用：
+study('Ivan',['jade','node','js'])
嵌套的mixin：
声明：
mixin group(student)
h4 #{student.name}
+study(student.name,studeng.courses)
调用：
+group({name: 'Ivan',courses: ['jade','node','js']})
mixin内联代码块：
声明：
mixin team(name)
h4 #{name}
if block //如果有代码块
block
else
p no block
调用：
+team('clayja')
p Good job!
mixin传递属性：
声明（单一属性）：
mixin attr(name)
p(class!=attributes.class) #{name} //这里传递的是class属性
//attributes已经转义，所以应该使用！=避免二次转义编译后:
调用：
+attr('attr')(class='magic')
声明（多属性）：
mixin attrs(name)
p&attributes(attributes) #{name}
调用：
+attrs('attrs')(class='attrClass',id='attrId')
mixin参数个数不确定：
声明：
mixin magic(name, ...items)
ul(class='#{name}')
each item in items
li= item
调用：
+magic('magic','jade','node','js')
10.模板继承：
layout.jade
doctype html
<!--[if IE 8]><html class='ie8'><![endif]-->
<!--[if IE 9]><html class='ie9'><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
head
include head
body
block desc
p desc from layout
block content //声明
</html>
index.jade
extends layout.jade //相对路径
block content
//当前文件声明的同名block将覆盖extends继承的
11.模板包含：
include filename（可以是jade、html）
12.filters(配合其他插件使用，如less，coffee，markdown)
语法：
:markdown或:less或:coffee
但不能传动态数据。
13.runtime
。。。。
14.html2jade:
类似资料：