使用 Jade 代替 HTML

Jade 与 HTML

SCSS 作为一个 CSS 高效的工具存在，Jade 的角色也是如此，但它是针对 HTML 的。
例如 <div> hello </div> 这段 HTML 代码中，div 首尾出现了两次，一定程度上是冗余的。
Jade 很像 Python (一种编程语言)，使用缩进语法来表达结构层次。HTML、Javascript、CSS 这些虽然实际编程中也会保持缩进，但不缩进也工作正常，而 Python 和 Jade 则必须遵循严格的缩进，因为它们代表的结构层次，有实质的意义。

代码示例

FirstWeb.app 中『 Jade 与 SCSS』 index.jade，重写自『开始 HTML』 index.html。

HTML 原始内容:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>我是标题, 可以修改</title>
    <link href="/style_in_scss.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <div class="cover">
        <div class="container">
            <h1 id="caption">你好，世界 <span class="alt">alt-one</span></h1>
            <h2>我是一个描述 <span class="alt">alt-two</span></h2>
            <div class=links>
                    <a href="/about">关于我</a>  <a href="/blog">博客</a>
            </div>
        </div>
      </div>
</body>
</html>

Jade 重写后的内容 (逻辑会更加清晰，同时，代码量实际上减少了):

html
    head
        title 我是标题, 可以修改
        link(href='/style_in_scss.css', type='text/css', rel='stylesheet')
    body
        .cover: .container
            h1#caption
                span 你好，世界
                span.alt alt-one
            h2
                span 我是一个描述
                span.alt alt-two
            .links
                a(href='/about') 关于我
                a(href='/blog') 博客

Jade 基本语法

Jade 使用缩进(Tab 或 4 个空格)保持结构，还有些其它基本语法，来实现最终的 HTML 结果。

HTML标签、id、class

.class_name this is content
// 默认会创建div标签，最终结果为<div class="class_name">this is content</div>

tag_name.class_1.class_2
// 结果为<tag_name class="class_1 class_2"></tag_name>，也可仅一个 class_1

a.a_class(href="#", title="a link")
// 多属性用`,`隔开，最终结果<a class="a_class" href="#" title="a link"></a>

span#dom_id.class_name_1.class_name_2 my content
// 结果为<span id="dom_id" class="class_name_1 class_name_2">my content</span>

注:

HTML 中一个 DOM 元素的多个属性之间是 空格 分开，而 Jade 是 , 来分隔，这点更像脚本语言 Python 的写法，类似于一个函数的调用。
文中出现的 HTML标签 也就是 TagName。

变量与HTML标签

本段的内容，在后续涉及到动态页面时非常有用，而静态页面(纯 HTML)是没有『变量』可言的。

node post.content  
//等同于<node>post.content</node>

var = post.content
// 等同于 {%set var = post.content %}, 是一个变量的赋值

node= post.content 
// =号左前无空格，则是将变量转为HTML标签，等同于<node>{{ post.content }}</node>

node= "post.content"
// 等同于<node>post.content</node>

为什么会引入『变量』的概念？
因为 Jade 是『模板引擎』，它更倾向于为动态页面服务的，而非纯静态的 HTML。在上文示例代码中，=号前后是一个空格还是两个空格、以及有还是没有=号，分别代表了不同的意思，通过这些约定，实现不同场景下语法的混合；这些设计的糅合，倒也算得上精巧。

关于 Jade

Jade 是有些年头的项目，后来项目名改为 Pug，且基本上是面向 NodeJS 的。
在 FirstWeb 中，我们特别定制了 Jade 转 HTML 引擎，一般情况下，并不需要特别去翻阅 Jade 原生的文档，就上文提及的一些简单语法掌握即可。

本质上，我们将 Jade 作为一个替代 HTML 的工具，但最终，它转化 (编译) 的结果仍然是 HTML。所以，Jade 只是一个中间态，至于转化的过程倒不那么重要，我们直接拿来用就可以了。

需要注意的问题

1，没有被编译为 HTML 的 Jade 文件，浏览器是不支持的。

2，Jade 的写法，能节省很多时间，特别后续我们涉及到动态页面时，你会发现，Jade 中调用一些变量，也特别简单和高效。

3， FirstWeb 的 Jade 语法是特别定制的，比如：

.cover: .container
    p hello world

按照常见的 Jade 语法，应该要写成：

.cover
    .container
        p hello world

但后者又会产生太多 缩进 的副作用，在 FirstWeb 中，故有 : (英文状态下的) 作为分割符的用法，以减少不必要 (其实就是指看起来很啰嗦) 的换行缩进。