[HTML & CSS General] Haml 入門

公開日: 2014/11/25
更新日: 2018/11/01

Middleman を実戦投入できそうな気がしてきたので、Haml も確認します。

[markdown]
“`prettyprinted
% haml -v
Haml 4.0.5
“`

> [Haml](http://haml.info/)

## インストールと基本

ざっくり確認。

> * [マークアッパー的 Haml入門21の手引き – Web学び](http://fukuyama.co/haml2)
> * [[ Middleman で超速プロトタイピング ] #00 Haml 再入門｜ Developers.IO](http://dev.classmethod.jp/ria/html5/middleman-supersonic-00-haml-relearning/)

ドットインストールにありましたね。
毎度ありがたいです。思い出せました。

> [Haml入門 (全8回) – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_haml)

Middleman では、ファイルの拡張子を .haml に変更するだけで使えるようになります。

## Sublime Text

いまのところ、HTML, CSS の扱いは Sublime Text が便利。
RailsTutorial の設定が生きていたので、何もせずにそのまま利用します。
こちらを参考にすると良さそう。

> [SublimeText2 for Rails Developers – Qiita](http://qiita.com/fakestarbaby/items/41b2a6646e4f36de09bf)

また後述しますが Emmet もインストールしておくと便利です。

> [sergeche/emmet-sublime](https://github.com/sergeche/emmet-sublime)

## 実践

Haml での書き方に迷っても、何とかなりそうな情報。
以下、Middleman で確認。

### 基本

ドットインストールに基本的な利用方法が載っている。

> [Haml入門 (全8回) – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_haml)

* 現在のバージョンは `html5` が標準フォーマット。
* 属性のダブルクオーテーションを設定すべき。

> [Haml: double quote attributes を設定する | deadwood](https://www.d-wood.com/blog/2014/11/24_7224.html)

### 変換ツールを利用する

とある[ツール](https://www.d-wood.com/blog/2014/11/24_7226.html)でうまく変換できなかったので、下記を試してみる。
インデント重要。

> [HTML2Haml | Convert HTML Snippets to Haml](http://html2haml.herokuapp.com/)

追記（2015/11/13）

> * [ERB, HTML を Haml に変換する | deadwood](https://www.d-wood.com/blog/2015/11/13_7676.html)

### 分からない部分は HTML で書ける

部分的に HTML を混ぜてもコンパイルできるよう。

“`haml
%aside
%h4 サンプルより
%img{:alt => “写真スタッフ”, :src => “https://placeimg.com/1000/722/people”}
%p 新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。

test.

“`

### フィルターで他の書式を混在させる

[フィルター](http://haml.info/docs/yardoc/file.REFERENCE.html#filters)を利用すると、Haml 内で他の書式を利用できる。

“`haml
%aside
:markdown
### H3のタイトル
* 箇条書き
“`

### Emmet で Haml を展開する

Sublime Text の設定後、.haml ファイルを編集すると、下記のように展開できる。

“`haml
#id.class>p{テキスト}+ul>li{箇条書き}*5
“`

“`haml
#id.class
%p テキスト
%ul
%li 箇条書き
%li 箇条書き
%li 箇条書き
%li 箇条書き
%li 箇条書き
“`

完全ではなさそうだけれども、利用できそう。

## 補遺

> * [Haml レシピブック 11の技 – ursmの日記](http://d.hatena.ne.jp/ursm/20091223/1261575772)
> * [Hamlが5分で分るチートシート [Rails初心者チュートリアル] – 酒と泪とRubyとRailsと](http://morizyun.github.io/blog/beginner-rails-tutorial-haml/)

Slim 情報。

> * [Middleman: らくらく Slim 入門 | deadwood](https://www.d-wood.com/blog/2014/02/26_5661.html)
[/markdown]