とあるhtmlのcomponentがあったとする。
それはモーダルを内包したcomponentだった。
.component-A(class='is-modalView' if isModalView)
.wrap
// ...
.modal
.contents
それにsassでスタイルを当てたとする
.component-A {
.wrap {
.modal {
display: none;
}
}
}
.component-A.is-modalView
の時に.modalをdisplay: block;
にしたいけど&が.component-A .wrap .modal
を全部持ってるのでネスト脱出するのが案外むずい。
sass3.3から@at-rootが導入されてるのでそれと補完構文を組み合わせればそこそこうまくいけた
.component-A {
.wrap {
.modal {
display: none;
@at-root .is-modalView#{&} {
display: block;
}
}
}
}
どうでしょう、キモさが目立ちますかね。
サンプル
See the Pen 16a91c738d02d1fb90e7 by nazomikan (@nazomikan) on CodePen.