hamlの復習

色々新しいこと試す時にhamlだと省略されすぎてて若干わかりづらかったので、個人アプリ弄ってる時はerbで適当にsassあててたが、今後はチーム開発での記述になるので、チーム内での記述はもちろん個人でもhamlを使ってネスト構造のscssをBEMに則った命名で@mixinを使いながら書いていこうと思った。とりあえず復習と思ったが、以下の記事がよく纏まっていたのでメモメモ

参考記事

https://qiita.com/yukimura1227/items/a1cbf65ac9abd4d138e1

個人的に気をつける箇所

htmlのカスタムデータは今のところ、それ自体使いこなしてる感が無いので、hamlになった時に余計に混乱しそう。使う時に読み直した方がいいだろう。

後は基本的なことだが、インデントに気をつけるってことか。大体hamlに怒られるのはインデントの深さ違いだから。１行目にインデントがあってもだめみたい。

簡単な捉えかたとしては

１行づつ捉える。行の先頭に

%か.か＃があればそれはタグである。

=か-があればそれはrubyの式である。

何もなければそれはタグに入ってない剥き出しの文章なので非推奨。挙動みるためかメモに使ってるって感じだろう。基本的に文章が入ってるならタグの後にスペース空けて文章が続く。

もちろんこれらが複合することはよくある。

閉じタグは気にしなくて良いが、逆にインデントはかなり注意する必要がある、カンマ無しに対しては厳しい、くらいに思っとけばいいかな。

ちなみにmixinならこの記事がわかり易かった

https://goodsan.jp/wp/sassmixin/

文章に値を含めたい時はとりあえず=""で始めて

="文章中にインスタンスの値#{hoge.name}を含めます"

みたいな感じ