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 使用缩进(Tab 或 4 个空格)保持结构,还有些其它基本语法,来实现最终的 HTML 结果。
.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>
注:
空格
分开,而 Jade 是 ,
来分隔,这点更像脚本语言 Python 的写法,类似于一个函数的调用。
HTML标签
也就是 TagName
。
本段的内容,在后续涉及到动态页面时非常有用,而静态页面(纯 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 是有些年头的项目,后来项目名改为 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 中,故有 :
(英文状态下的) 作为分割符
的用法,以减少不必要 (其实就是指看起来很啰嗦) 的换行缩进。