ゆうじろ〜のWEBエンジニア日記

アップ主が勉強内容をアウトプットし、サボらないようにする為のブログ

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

f:id:yujiro0320:20190512223713p:plain

学習状況

●学習日数 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(修飾語)
に分けて、命名規則をもうける。この3点以外は使用しない。

f:id:yujiro0320:20190514143904p:plain

hamlの導入について

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

 gem 'haml-rails'
  gem 'erb2haml'

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

 rake haml:replace_erbs
|| <

●さいごに