プログラミング学習記録 Haml,Scssによるマークアップ
今月の頭にHTMLとCSSを初めて触ったと思ったら、もうその発展形のHAMLとSCSSを使わなければならない状況となった。HamlとSCSSを理解するのは結構大変だったので、忘れても思い出せるように最低限の使い方のメモを残しておく。
○Haml
・クラスの書き方は .クラス名 (HTMLでは<div class="クラス名">)
・タグの書き方は %タグ (pタグは%p,hタグは%h)
・要素を入れ子構造で記述する。
・BEMの法則に則ってクラスのネーミングをする。
EX
.main
.main__header
.main__header__title
%h1 title
.main__body
.main__footer
○SCSS
・要素を入れ子構造で記述する。
・& で親要素のクラス名を表現出来る。
EX
.main {
&__header {
&__title {
& h1 {
}
}
}
他にもたくさん機能はあるが、とりあえずこれだけ知ってれば今までのHTML、CSSの知識で同じように書けると思う。