見出し画像

【css】scss:親セレクタの仕様メモ

恥ずかしながら最近覚えた、入れ子での親セレクタの書き方。
出力のルールについて勘違いしていたのでメモ。

以下のように書いた場合・・

.a {
  .b {
    .c {
      .child {
        .oya & {
          color: red;
        }
      }
    }
  }
}

自分は以下のような出力を期待していたのですが・・

.a .b .c .oya .child {
  color: red;
}

実際はこうなります。
親セレクタとして挿入したクラスが一番外側に来る。

.oya .a .b .c .child {
  color: red;
}

以上。//

いいなと思ったら応援しよう!