Hamlとは

  • 8
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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入れる

  1. 保存時に自動ビルドしてくれるように、SublimeOnSaveBuildを入れる。
  2. [Ctrl + Shift + P]でPackage Controll : Instal Packageを選択
  3. SublimeOnSaveBuildを選択
  4. 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が作成される

関連
Slimとは