SCSS を使っているとより高度な記述をするようになっていくことと思います。
今回は、記述した場所より上のセレクタ（親）のネストを解除する方法を説明したいと思います。
INDEX
セレクタのネストを解除する
@at-root を記述することで、親セレクタのネストを解除することができます。
SCSS
[code]
.wrapper {
.content { color: red; }
@at-root .content { color: red; }
@at-root {
.abc { color: red; }
.xyz { color: red; }
}
}
[/code]
コンパイル後
[code]
.wrapper .content { color: red; }
.content { color: red; }
.abc { color: red; }
.xyz { color: red; }
[/code]
まとめ
@at-root を多用するとコードの見通しが悪くなり、チームでの開発やメンテナンスに問題が生じる可能性があります。
例外的な部分の使用に留めておき、名前空間やクラス定義でなるべくカバーできるようにしましょう。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
