jade いいよ jade

GEEK Lightning talk #1

Tomoki Komatsu

Today's Menu

What's jade
jade's character
My favorite jade's character
Let's jade

# What's jade JadeはJavaScriptのNode.jsで実装されたテンプレートエンジンでHTMLを簡単にかける記法みたいなやつです。 CSSのすごいやつがSassなら、HTMLのすごいやつとおぼえましょう。

# jade's character jadeの代表的なお作法は以下のとおりです。 - 閉じタグ不要 - id class はCSSと同じ感じ - インデントで階層を明示

閉じタグ不要 + id class はCSSと同じ感じ

Before(jade)

p.className 進捗どうでしょう？

After(HTML)

<p class="className"> 進捗どうでしょう？</p>

インデントで階層を明示

### Before(jade) ``` section p.className 進捗どうでしょう？ ```

### After(HTML)

<section> <p class="className">進捗どうでしょう？</p> </section>

My favorite jade's charactor

include

jadeはmdファイルなどのインクルードが可能かつ
変数も使用できるのでmata情報を変数にしてインクルードでもユニークなmetaを設定できます。

_meta.jade (include file) meta(name="description" content="#{description}") meta(name="keywords" content="#{keywords}") link(href="css/style.css", rel="stylesheet")

index.jade - var title = 'Title Test';//titleの指定 - var description = 'This is a description';//descriptionの指定 - var keywords = ['test1', 'test2'];//keywordsの指定 doctype html(land="ja") head include _meta//_mata.jadeをインクルード(jadeファイルは拡張子不要) body .wrapper header p test section.main__content p section.right__content footer include _footer

### result <!DOCTYPE html> <html land="ja"> <head> <meta charset="utf-8"> <title>Title Test</title> <meta name="description" content="This is a description"> <meta name="keywords" content="test1,test2"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <header> <p>test</p> </header> <section class="main__content"> <p></p> </section> <section class="right__content"></section> <footer> <p class="copy">©Tomoki 2015 All Rights</p> </footer> </div>

mixin

テンプレートをモジュール化する機能
関数のような形でブロックを生成できます。

example


            mixin img(src, alt, className)
  - if(className)
    img(class="#{className}", src="img/#{src}", alt="#{alt}")
  - else
    img(src="#{src}", alt="#{alt}")

p
  +img("img/ttl.jpg", "タイトル画像", "header_ttl")//imgというmixinを呼び出す

### After <p><img src="img/ttl.jpg" alt="タイトル画像" class="header_ttl"/> </p>//なぜか改行されてしまう・・・

## Let's jade ポータルサイト系やテンプレ系の更新案件などにいかがでしょうか個人的にはincludeとmixinが強力な気がしています。ただ、インデントでの制御なので、半スペズレるだけで詰む可能性も・・・

THE END

・ HTML Slide by reveal.js