Haml vs Slim vs Jade { code }

2014-2016.10
求人とも比例したりするかもしれません。

ベース

Haml , Slim

Ruby製のテンプレートエンジン

Jade

Node.js製のテンプレートエンジン

通常

<h1 id='id'>テキスト</h1>
<br>
<ul>
  <li>0: リスト</li>
  <li>1: リスト</li>
  <li>2: リスト</li>
</ul>
<a href='#'>リンク</a><!-- コメント -->
<div id="main" class="mClass" > test </div>

Haml

%h1#id テキスト
%br
%ul
  - 3.times do |i|
    %li #{i}: リスト

%a{ href: "#" } リンク
/ コメント 変換後表示されない
#main.mClass /div省略可

Slim

h1#id テキスト
br
ul
  - 3.times do |i|
    li #{i}: リスト

a(href="#") リンク
/ 変換後表示されないコメント /! 変換後HTMLコメントになる
#main.mClass /div省略可

Jade *比較コードは違います

doctype html
html
  head
    meta(charset='UTF-8')
    title 最高にクールなホームページ
    link(rel='stylesheet', href='./css/app.css')
  body
    h1 最高にクールなホームページ
    p 最高にクールなホームページへようこそ。
    script(src='./js/app.js', charset='UTF-8')

Links

haml slim 比較

haml 書き方

haml

slim とは Qiita

jade参考元

Jade入門

シェアする

トップへ戻る