CSS, SCSSのスコープに関するメモ

Last updated at 2023-12-16Posted at 2023-12-16

メモ書き程度に記す。
CSS, SCSSを利用する上で気を付けておくべき記法。

1. 配下すべてに適用

parent要素以下のelement要素すべてに適用させる。子も孫もひ孫も。

style1.scss

.parent{
    .element{
        hoge: 100;
    }
/* もしくは */
    & .element{
        hoge: 100;
    }
}

↓コンパイル結果

style1.css

.parent .element{
    hoge: 100;
}

CSS, SCSSで＞をつけると子のelement要素のみに適用される。孫のelement要素には適用されない。

style2.scss

.parent{
    > .element{
        hoge: 100;
    }
/* もしくは */
.parent{
    & > .element{
        hoge: 100;
    }
}

↓コンパイル結果

style2.css

.parent > .element{
    hoge: 100;
}

CSSでピリオドで続けて記載すると、複数クラスを持つクラスの一部に適用できる。SCSSでは、アンパサンドを使ってスペースを入れずに記載する。

style3.scss

.parent{
    .element{
        &.second-child{
            hoge: 100;
        }
    }
}

↓コンパイル結果

style3.css

.parent .element.second-child{
    hoge: 100;
}