インクリボンとタイプライター

セーブがしたいんです…

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