sinatraで使えるメタ言語

sinatra Ruby

hamlやsassなどテンプレートエンジンが使えますがそれぞれどんなのか調べてみました

htmlのメタ言語

とりあえずこれを記述させる

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
    <meta charset='utf-8'>
  </head>
  <body>
    <div class="main">
      <h1 id="title">ここに見出しを書く</h1>
    </div>
  </body>
</html>

haml

!!!
%html
  %head
    %title タイトル
    %meta{charset: "utf-8"}
  %body
    .main
      %h1#title ここに見出しを書く

インデントが階層を意味しシンプルな記述。使ってる人多い

slim

doctype html
html
  head
    meta charset="utf-8"
    title タイトル
  body.main
    #title
      h1 ここに見出しを書く

<,>,/>がない感じ

builder

xmlのマークアップが作れる rssとか表示させるときに使える

xml.instruct! :xml, :version => '1.0'
xml.rss :version => "2.0" do
  xml.channel do
    xml.title "title"
    xml.description "description"
    xml.link "http://"
  end
end

検索がつらい

liquid

<!DOCTYPE html>
<html>
  <head>
    <title>{{ @title }}</title>
    <meta charset='utf-8'>
  </head>
  <body>
    <div class="main">
      <h1 id="title">{{ @maintitle }}</h1>
    </div>
  </body>
</html>

erbライクに埋め込みができる http://www.slideshare.net/TomohikoHimura/liquid

css系メタ言語

とりあえずこれを記述させる

body {
  background: #bbb;
}
.main #title {
  color: #e3e; 
}

sass

body
  background: #bbb
.main
  #title
    color: #e3e

入れ子にできてシンプルな記述

scss

body{
    background: #bbb;
}
.main{
  #title{
    color:#e3e;
  }
}

sassもだけど$line_color: #000;とかで定数も使える widthとかも計算させられる

less

body{
    background: #bbb;
}
.main{
  #title{
    color:#e3e;
  }
}

scssと違いが…… http://d.hatena.ne.jp/nenjiru/20111101/css_scss_less

色々調べてたら迷ってきた 検索しやすいやつ使おう