親セレクタのクラスが違う時にスタイルを変更したい時は、 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; }