scss 『セレクタの後に&』で親セレクタを変更

セレクタのクラスが違う時にスタイルを変更したい時は、 scssのネストの外のセレクタを指定した後に、&をつける。

※ネストの中のセレクタを指定すると、ネストの中に入ってしまうので注意!

<!--html-->
<div>
    <p>文字は青色</p>
</div>

<div class="txt_red">
    <p>文字は赤色</p>
</div>

<section>
    <p>文字は緑色</p>
</section>
//scss
p{
    color: blue;
    
    //親セレクタのクラスを指定・変更する(ネストの外のセレクタを指定する)
    .txt_red & {
        color: red;
    }
    
    //親セレクタを指定・変更する(ネストの外のセレクタを指定する)
    section & {
        color: green;
    }
}
//css
p {
color: blue; }

.txt_red p {
color: red; }

section p {
color: green; }