プログラミング勉強中です
お気付きの点があれば、ご指導お願いします!
##記述の基本ルール
!!!
DOCTYPE宣言
%
開始、終了タグを示す
例えば
%pは
. はクラス
#はid を表す
hamlはこんな感じですけど
hoge.haml
!!!
%html
%body
%p.hoge hello world
%p#hoge hello world
%p.hoge.hoge hello world
htmlに戻すとこんな感じ
hoge.html
<!DOCTYPE html>
<html>
<body>
<p class="hoge">hello world</p>
<p id="hoge">hello world</p>
<p class="hoge hoge">hello world</p>
</body>
</html>
##属性の付け方
##コメントの書き方
コメントの書き方は2通り
/ コメントになる
-# コメントになる
##改行
1行で表示したい場合
hoge.haml
%p hello world
hoge.html
<p> hello world </p>
改行したい場合はインデントを使う
hoge.haml
%p
%li
hoge.html
<p>
<li>
</li>
</p>
#id classの付け方
idはシャープ(#)、クラスはドット(.)
このhtmlファイルを
hoge.html
<div class="hoge"></hoge>
hamlファイルにすると以下のようになる
hoge.haml
%div.#main.hoge
ちなみに%divは省略可能。なので上と下のコードは同じ意味
hoge.haml
%div.#main.hoge -#上下同じ意味
#main.hoge
##rubyの式を挿入する
ハイフン(-)で変数の指定が可能
イコール(=)で変数を表示する
hoge.haml
- num =5 /変数の定義
= num / numが表示される
rubyの式を使うこともできます
hoge.haml
- fruits =['りんご','みかん']
- fruits.each do |fruit|
%p = "#{fruit}"
htmlに変換するとこんな感じ⇩
hoge.html
<p>りんご</p>
<p>みかん</p>
#haml⇆htmlのサイト
ウェブ上でhamlとhtmlをできるサイトがある
以下参考⇩