自分の手で未来を創るーlav0

自分のために、誰かのために、今ここにないもの、もっと良くしたいもの、何でも自分の手で創っていく。そして、作ったものを公開していきます

Haml基礎

Qiitaなどでお調べすると、Hamlで書かれている方もたくさんいらっしゃり、せっかく書いていただいている有益な情報なのにいつもと勝手が違い、読めず断念したことが。ということで基礎部分だけまとめたメモです。

f:id:kslabo51:20191217234454j:plain

 

Hamlとは

HTML Abstraction Markup Language 

※HTMLをすっきり&美しく書く

Rubyがベース   

 

haml.info

 

haml.info

  

ディタとローカルでの基本的な使い方

 

※拡張子 index.haml

※ターミナルでhamlファイルを読み込みhtmlファイルに変換する

 $ haml -q -f html5 入力に使うファイル名(.ham)l 出力したいファイル名(.html)

  (オプション指定付き)

※ターミナルに変換したファイルの中身を表示するコマンド

 $ less index.html

 

①基本的な記述方法

f:id:kslabo51:20191217233650p:plain

②idやclassのつけ方

f:id:kslabo51:20191217233725p:plain

CSSやJS、divタグの挿入

f:id:kslabo51:20191217233801p:plain

④③の表示の確認

f:id:kslabo51:20191217233852p:plain

⑤演算やeach文

f:id:kslabo51:20191217234102p:plain

⑥表示の確認

f:id:kslabo51:20191217234145p:plain

 

ほんとに超基礎しか書いていないので、ほんとはもっともっといろいろあるけど、まだ読めればいい段階なので基本を押さえて、いずれ書けるようになっておく