haml

Hamlとは

More than 3 years have passed since last update.


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とは