, , ,

[HTML & CSS General] Haml 入門

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

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

% haml -v
Haml 4.0.5

Haml

Contents

インストールと基本

ざっくり確認。

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

Haml入門 (全8回) – プログラミングならドットインストール

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

Sublime Text

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

SublimeText2 for Rails Developers – Qiita

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

sergeche/emmet-sublime

実践

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

基本

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

Haml入門 (全8回) – プログラミングならドットインストール

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

Haml: double quote attributes を設定する | deadwood

変換ツールを利用する

とあるツールでうまく変換できなかったので、下記を試してみる。
インデント重要。

HTML2Haml | Convert HTML Snippets to Haml

追記（2015/11/13）

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

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

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

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

フィルターを利用すると、Haml 内で他の書式を利用できる。

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

Emmet で Haml を展開する

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

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

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

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

補遺

Slim 情報。