プロダクト開発日誌

技術のことなど

ざっくりHaml

Ruby haml Ruby on Rails

Haml (HTML Abstraction Markup Lunguage)

概要

コツ

  • h1, tableなどは開始タグと閉じタグを削除し、%をタグにつける。
  • id属性、class属性、その他の属性を追加する場合は、{}でハッシュ形式
  • ifやeachなどロジック部分の行には、先頭に-
  • インデントに気をつける

準備

作業用ディレクトリの作成

$ mkdir haml_lesson; and cd haml_lesson
$ code .

Rubyのバージョンを指定

$ rbenv local 2.5.1
$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin17]

hamlのインストール

$ sudo gem update --system
$ gem install haml
$ gem list | grep haml
haml (5.0.4)

変換

大まかな流れとして、hamlファイルをhamlに通すとhtmlが出来上がる。

$ string trim '
!!!
%haml
  %body
    hello world!
'> index.haml

htmlに変換

$ haml -q index.haml index.html
# -q : シングルクォーテーションではなくダブルクオテーションを使用する

確認

$ less index.html

基本

  • !!! → <!DOCTYPE html>
  • % → 開始タグと終了タグ

属性

htmlっぽく書いたり,htmlっぽく書いたりできる

%p(class="test") hello world or %p{class: "test"} hello world
↓
<p class='test'>hello world</p>

他にもさまざまな書き方ができる

%div{id: "main", class: "test"}
%div(id="main" class="test")
%div#main.test
#main.test
↓
<div class='test' id='main'></div>

コメント

/ end body
↓
<!-- end body -->

/ コメント
  コメント
  コメント
↓
<!--
  コメント
  コメント
  コメント
-->

hamlファイルのみのコメント

-# コメント

改行

%p hello
↓
<p>hello</p>
%p
  hello
↓
<p>
  hello
</p>
%p<
  hello
↓
<p>hello</p>

Filter

:css
  .myStyle {
    color: red;
  }

↓

<style>
  .myStyle {
    color: red;
  }
</style>
:javascript
  alert(1);
  if (1) {
    alert(2);
  }

↓

<script>
  alert(1);
  if (1) {
    alert(2);
  }
</script>
%div
  :escaped
    <html>
    </html>

↓

<div>
&lt;html&gt;
&lt;/html&gt;
</div>

Rubyの評価

%p total is #{3 + 9}
↓
<p>total is 12</p>
%p= Time.now
↓
<p>2018-10-05 10:42:56 +0900</p>
- x = 10
%p= x
↓
<p>10</p>
- (1..10).each do |i|
  %p{id: "item_#{i}"} #{i}
↓
<p id='item_1'>1</p>
<p id='item_2'>2</p>
<p id='item_3'>3</p>
<p id='item_4'>4</p>
<p id='item_5'>5</p>
<p id='item_6'>6</p>
<p id='item_7'>7</p>
<p id='item_8'>8</p>
<p id='item_9'>9</p>
<p id='item_10'>10</p>