<DAY84> SASS、HAML文法について学んだ

学習状況

●学習日数 84日 

●学習時間(本日) 7時間

●累計学習時間 304.0時間

●一日あたりの平均学習時間 3.61時間 

CSS、SASSとSCSSの概略

sassは、非常にシンプルな記法。でも普及はせず。
scss記入はcssだが、sassの機能を持たしたもの。
cssでなくscssを使うメリットは、
記述がしやすい（セレクタをネストできたり）。
複数のCSSをまとめる事ができる。（パーシャル）
同じ値を使いまわせる。（変数定義）

sassについて

親要素をセレクトし、ネストさせる事をアンパサンドという。
以下の図では、小要素をつなぐ前に
＆をかまして、小要素を加える。

a {
    display: block;
    background-color: #000;
    color: #fff;
}
 
a:hover {
    background-color: #999;
    color: #000;
}

a {
    display: block;
    background-color: #000;
    color: #fff;
    &:hover {
        background-color: #999;
        color: #000;
    }
}

参考　
https://uxmilk.jp/38217

@mixinついて

mixinで定義したスタイルをincludeで呼び出せるようにする。
いわば関数的な使い方ができる。

参考　
https://code-schools.com/css-sass-mixin/

BEMの設計

cssの設計思想。
Block（ブロック）Element（要素）、Modifie（修飾語）
に分けて、命名規則をもうける。この３点以外は使用しない。

hamlの導入について

HTMLのコードを簡単にしたコード。GEMをインストールし、拡張子を変更する事で
使用ができる。

 gem 'haml-rails'
  gem 'erb2haml'

このコマンドで拡張子を一発変換できます。

 rake haml:replace_erbs
|| <

●さいごに