Jade入门级介绍

发表于   |   分类于 ，

介绍

最近，到了新的公司上班，接触到的HTML编写方式为使用jade。习惯了手写HTML硬编码的我，一时之间还不太适应这种快速高效的方式。

我们先通过一个例子来讲述一下这款工具的牛逼之处吧！

1
2
div.container#main Content
a.btn(href="javascript:;",title="link") Button

经过工具编译后，以上代码将会输出：

1
2
<div class="container" id="main">Content</div>
<a class="btn" href="javascript:;" title="link">Button</a>

是不是有种简单粗暴的即视感？

基本语法

基本属性的写法如下：

每行开始的第一个单词将会作为HTML标签名，如果没有，则默认为div。

类名和ID，同CSS选择器的语法——类名为.号开始，如果有多个类名，叠加展示即可。如section.index.tips；ID为#标识。

HTML元素的其他属性可以写在跟在后面的括号()之内。多个属性，可以使用逗号,或者空格隔开。

元素内的文本则以一个空格后直接书写。

Jade采用对缩进敏感的语法，来划分HTML的层次结构。

1
2
3
4
5
ul
  li A 
    span text
  li B
  li C

将会被编译成：

1
2
3
4
5
<ul>
  <li>A<span>text</span></li>
  <li>B</li>
  <Li>C</Li>
</ul>

循环

jade支持循环。比如：

1
2
- for (var i = 0; i < 3; i++)
  li item

将会被编译成：

1
2
3
<li>item</li>
<li>item</li>
<li>item</li>

继承

jade使用extends来继承代码片段，继承可以修改代码片段。

页面中使用block标识符，可以指定一个代码片段的名字，比如名字设为name。在需要使用该代码片段的地方，直接使用block name即可。

文件包含

jade可以使用include语法实现高度复用代码。将这些代码片段保存到不同的文件中，然后在需要的地方进行引入即可。

混合宏

mixin是jade提供的另一个方法，可以很大程度提升HTML编写的效率。语法类似于sass和less中的混合宏。

混合宏具有高度复用、解耦、可读、可扩、可维护等特点，是众多预编译语言的共同特点。

jade中使用mixin标识符进行混合宏的创建，在需要的地方使用+标识符进行调用即可。

1
2
3
4
5
6
7
8
mixin list
  ul
    li foo
    li bar
    li baz

+list
+list

将会被编译成：

1
2
3
4
5
6
7
8
9
10
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

支持参数的传入：

1
2
3
4
5
6
mixin card(name)
  li.card= name
ul
  +card('A')
  +card('B')
  +card('C')

将会被编译成：

1
2
3
4
5
<ul>
  <li class="card">A</li>
  <li class="card">B</li>
  <li class="card">C</li>
</ul>

还可以使用余参：

1
2
3
4
5
6
mixin list(id, ...items)
  ul(id=id)
    each item in items
      li= item

+list('example', 1, 2, 3, 4, 5)

将会被编译成：

1
2
3
4
5
6
7
<ul id="example">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

jade的入门级介绍到这里就告一段落，还有一些高级语法，可以参考官方文档。