プログラミング学習記録 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の知識で同じように書けると思う。