Sass基本　scssの文法[No.2]

• ネスト

• &  セレクタ名を省略

• $変数

• 小要素のみに適用して孫要素には適用しない

• !important

• transform

• position

• 疑似要素

ネスト　セレクタ名とスペースの省略

#container{

    btn{ // container btn{　と同じ意味
        color: red;
    }
}

&　セレクタ名を省略

.btn{
    cursor: pointer;
    background-color: white;

    &:hover{ // .btn:hoverと同じ意味
        background-color: red;
        transition: all 0.5s;
    }
}

$変数　管理がしやすくなる

$cWhite: white; //色を指定

#container{
    background-color: $cWhite;
}

小要素のみに適用して孫要素には適用しない
 > を使う

.parent{
    color: blue;

    > .element{ //.parent > .elementと同じ
        color: purple;
    }
}

複数のクラスを持つ場合の絞り込みんで適用するにはスペースを空けずに記載する

sassの場合
.parent{
    color: blue;

    > .element{
        color: purple;

            &.second-child {
                color: black;
            }
    }
}
cssの場合
.parent > .element.second-child{
    color: black;
}

!important
詳細度を無視してスタイルを適用させる

transform:
translate(100%, 100%)x軸とy軸方向に移動させる
rotate(90deg)　回転　degは角度を意味する
skew(deg)　平行四辺形を作る
scale(1.5, 1.5) 拡大縮小
複数のtransformを指定したい場合はスペースをあける
transform-origin:　
　回転の中心を決められる
　bottom right left top

position(要素を重ねて配置する)
親にrelative
子にabusoluteとtopとleftを指定することで
親を基準に位置を指定できる

z-indexはpositionがstatic以外の時にレイヤー層をを決める

position: fixed;　スクロールしても固定
top: 0;　or　bottom: 0;で上か下に固定できる

position: sticky　親要素の中でのみスクロールに追従する
※親要素にoverflow: hidden;(枠外を非表示)を設定してはいけない

display: flex;(要素を重ねずに配置する)

疑似要素(空のspanタグを生成する)
一つのタグに生成できるのは１つ
::before{
content:　'';
}