Hamlとは #haml

Haml（はむる）

「HTML abstraction markup language」の略

HTML/XHTMLを生成するためのマークアップ言語。HTMLを効率的に生成するための記法。
CSSにおけるSassみたいな。
hoge.hamlファイルを作って→hoge.htmlに変換する。

記述が少なくてすむ
Rubyが使える
変数を宣言、条件分岐、繰り返し処置が出来る

例1

.haml

!!!

↓変換すると

.html

<!DOCTYPE html>

例2

.haml

%h1 hoge

↓変換すると

.html

<h1>hoge</h1>

基本

%でタグ名
-# でコメント
インデント半角2spaceで入れ子

SublimetextでHamlをhtmlファイルにする

Hamlファイル出力するには
1. Ruby入れる
2. haml入れる
3. ビルドシステムを追加する
4. 保存時自動ビルドの設定

1. Ruby入れる

2. haml入れる

コマンドプロンプトかターミナル開いて下記コマンド実行

gem install haml

3. ビルドシステム追加

Sublime textの　Tools > ビルドシステム > ビルドシステムを追加

下記コピペ保存

.haml

{
  "cmd": "haml",
  "selector": "source.haml",
  "working_dir": "${file_path}",

"windows": 
  { "cmd": ["haml.bat", "$file", "$file_path/$file_base_name.html"] },

"osx":
  { "cmd": ["haml", "$file", "$file_path/$file_base_name.html"], }
}

4. SublimeOnSaveBuild入れる

保存時に自動ビルドしてくれるように、SublimeOnSaveBuildを入れる。
[Ctrl + Shift + P]でPackage Controll : Instal Packageを選択
SublimeOnSaveBuildを選択
Prerences　> Package Setting > SublimeOnSaveBuild > settings - User から下記コピペ保存

{
    "filename_filter": "\\.(css|js|sass|less|scss|haml)$",
    "build_on_save": 1
}

SublimeのTools > Build System > haml
を設定してから、hoge.hamlファイルをどこかに作り、ctrl+Sで、同階層にhoge.htmlが作成される