参考

Jade公式 : リファレンス

環境など

OS X Yosemite 10.10.3
Node.js v0.11.16
npm 2.3.0
Gulp 3.8.11
Jade 1.9.2

docutype だの head だのの例

doctype html
html(lang="ja")
	head
		meta(charset="utf-8")
		title= "Jade Sample"
		link(rel='stylesheet', href='./css/style.css')
		script(src="./js/script.js")
	body

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Jade Sample</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/script.js"></script>
  </head>
  <body></body>
</html>

コメント

一行コメント

// Single Line Comment

<!-- Single Line Comment -->

複数行のコメント

//
	one
	two
	three

<!--
one
two
three
-->

Plain Text

インライン

p HelloWorld

<p>HelloWorld</p>

ブロック

HTMLを含むことができる。ピリオドの後に改行が必要

p.
<span>Lorem</span> cum ex eligendi minima nulla doloremque. Laboriosam quidem consequatur quo ad dolor dolore voluptat    em quaerat. Ut dicta fuga cum temporibus esse suscipit voluptatum dolore incidunt labore omnis odio eaque.

<p>
<span>Lorem</span> cum ex eligendi minima nulla doloremque. Laboriosam quidem consequatur quo ad dolor dolore voluptat    em quaerat. Ut dicta fuga cum temporibus esse suscipit voluptatum dolore incidunt labore omnis odio eaque.
</p>

属性

id, class

p(id="unique_id") HelloWorld
p(class="main_text") HelloWorld

<p id="unique_id">HelloWorld</p>
<p class="main_text">HelloWorld</p>

複数の指定

p(class="one two three") HelloWorld
p.one.two.three HelloWorld

上2つの結果は一緒

<p class="one two three">HelloWorld</p>

Literal (emmet的にも書ける)

p#unique_id.main_text HelloWorld

<p id="unique_id" class="main_text">HelloWorld</p>

配列

- var classes = ['four','five','six']
p(class=classes) HelloWorld

<p class="four five six">HelloWorld</p>

属性を配列やオブジェクトで定義

- var classes = ['one','two','three'];
- var attr = {'class':classes,'data-foo':'bar'};
# box&attributes(attr) contents

<div id="unique_id" class="one two three" data-foo="bar">contents</div>

イコールを使っての複数の定義

改行で区切ってイコールで定義・代入

# box(
	class="one two three"
	data-foo="bar"
) contents

<div id="box" data-foo="bar" class="one two three">contents</div>

変数

- var foo = 'bar';
p= foo

<p>bar</p>

Interpolation

- var foo = 'bar';
p hogehoge hugahuga #{foo}

<p>hogehoge hugahuga bar</p>

Tag Interpolation

p.
	#[a(target="_blank", href="http://google.com/") Google]

<p><a target="_blank" href="http://google.com/">Google</a></p>

分岐処理

- var flg = true;

# box
	if flg
		p TrueText
	else
		p FalseText

<div id="box">
	<p>TrueText</p>
</div>

繰り返し処理

ul
	each val,key in {'home':'http://google.com/','about':'http://yahoo.co.jp/','reqruit':'http://qiita.com/','blog':'http://webya.in/','er':'http://www.facebook.com/'}
		li
			a(href="#{val}") #{key}

可読性がすこぶる悪いよね。ってことで、いくらかマシにする

- nav = {};
- nav.home = 'http://google.com/';
- nav.about = 'http://yahoo.co.jp/';
- nav.reqruit = 'http://qiita.com/';
- nav.blog = 'http://webya.in/';
- nav.er = 'http://www.facebook.com/';

ul
	each val,key in nav
		li
			a(href="#{val}") #{key}

<ul>
	<li><a href="http://google.com/">home</a></li>
	<li><a href="http://yahoo.co.jp/">about</a></li>
	<li><a href="http://qiita.com/">reqruit</a></li>
	<li><a href="http://webya.in/">blog</a></li>
	<li><a href="http://www.facebook.com/">er</a></li>
</ul>

ちなみにもっとスマートに書こうと思って

- var nav = {
- };

とするとエラーになる。本当だったらこうしたかったけど。

- var navis = {
-	home: 'http://google.com/',
-	about: 'http://yahoo.co.jp/',
-	reqruit: 'http://qiita.com/',
-	blog: 'http://webya.in/',
-	er: 'http://www.facebook.com/'
- };

配列でも同様、スマートにかけなかった＞＜
過去のバージョンならできたっぽいけど。ってことで。

- var arr = ['one','two','three'];
- arr.push('four');
ul
	each val in arr
		li= val

<ul>
	<li>one</li>
	<li>two</li>
	<li>three</li>
	<li>four</li>
</ul>

継承

基底

super.jade

doctype html
html(lang="ja")
	head
		meta(charset="utf-8")
		block title
			title= "Jade Default Title"
		link(rel='stylesheet', href='./css/style.css')
		script(src="./js/script.js")
	body
		block contents

派生

index.jade

extends ./super.jade

block title
	title Jade Child title

block contents
	h1 Hello Extend Jade !

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Jade Child title</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/script.js"></script>
  </head>
  <body>
    <h1>Hello Extend Jade !</h1>
  </body>
</html>

基底となる jade ファイルでは

block ブロック名

で、派生 jade ファイルで拡張することができるよ。default値の設定もできて便利

includes

header.jade

# header
	h1 SiteTitle

jade.gnav.jade

- nav = {};
- nav.home = 'http://google.com/';
- nav.about = 'http://yahoo.co.jp/';
- nav.reqruit = 'http://qiita.com/';
- nav.blog = 'http://webya.in/';
- nav.er = 'http://www.facebook.com/';
# gnav
	ul
		each val,key in nav
			li
				a(href="#{val}") #{key}

sidebar.jade

# side
	ul
		li "one"
		li "two"
		li "three"

footer.jade

# footer
	p "copyright 2015 webya.in"

index.jade

doctype html
html(lang="ja")
	head
		meta(charset="utf-8")
		title "Jade Default Title"
		link(rel='stylesheet', href='./css/style.css')
		script(src="./js/script.js")
	body
		include ./header.jade
		include ./gnav.jade
		include ./sidebar.jade
		include ./footer.jade

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>"Jade Default Title"</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/script.js"></script>
  </head>
  <body>
    <div id="header">
      <h1>SiteTitle</h1>
    </div>
    <div id="gnav">
      <ul>
        <li><a href="http://google.com/">home</a></li>
        <li><a href="http://yahoo.co.jp/">about</a></li>
        <li><a href="http://qiita.com/">reqruit</a></li>
        <li><a href="http://webya.in/">blog</a></li>
        <li><a href="http://www.facebook.com/">er</a></li>
      </ul>
    </div>
    <div id="side">
      <ul>
        <li>"one"</li>
        <li>"two"</li>
        <li>"three"</li>
      </ul>
    </div>
    <div id="footer">
      <p>"copyright 2015 webya.in"</p>
    </div>
  </body>
</html>

Mixin

mixin entry(title,date,contents)
	.entry
		h2= title
		p.date
			span= date
		.contents= contens

+entry('MyBlogTitle','2015.05.05','MyBlogContents')

<div class="entry">
	<h2>MyBlogTitle</h2>
	<p class="date"><span>2015.05.05</span></p>
	<div class="contents">MyBlogContents</div>
</div>