Jade をざっペロ

## 参考
[Jade公式 : リファレンス](http://jade-lang.com/reference/)

## 環境など

* 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 だのの例 

```jade
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
```

```html
<!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>
```

## コメント

一行コメント

```jade
// Single Line Comment
```

```html
<!-- Single Line Comment -->
```

複数行のコメント

```jade
//
	one
	two
	three
```

```html
<!--
one
two
three
-->
```

## Plain Text

### インライン

```jade
p HelloWorld
```

```html
<p>HelloWorld</p>
```

### ブロック

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

```jade
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.
```

```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>
```

## 属性

### id, class

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

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

複数の指定

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

上2つの結果は一緒

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

Literal (emmet的にも書ける)

```jade
p#unique_id.main_text HelloWorld
```

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

配列

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

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

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

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

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

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

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

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

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


## 変数

```jade
- var foo = 'bar';
p= foo
```

```html
<p>bar</p>
```

### Interpolation

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

```html
<p>hogehoge hugahuga bar</p>
```

### Tag Interpolation

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

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


## 分岐処理

```jade
- var flg = true;

#box
	if flg
		p TrueText
	else
		p FalseText
```

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


## 繰り返し処理

```jade
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}
```

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

```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/';

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

```html
<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>
```

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

```jade
- var nav = {
- };
```

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

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

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

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

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


## 継承

基底

```jade: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
```

派生

```jade:index.jade
extends ./super.jade

block title
	title Jade Child title

block contents
	h1 Hello Extend Jade !
```

```html: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

```jade: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}
```

```jade:sidebar.jade
#side
	ul
		li "one"
		li "two"
		li "three"
```

```jade:footer.jade
#footer
	p "copyright 2015 webya.in"
```

```jade: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
```

```html: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

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

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

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