私はBEMとSCSSを試みている間に。 SCSSを使ってモディファイアとエレメントを選択するのは簡単ですが、モディファイアを使用している間に難しい部分があります。モディファイアクラスを持たない参照エレメントは、私が作成したきちんとしたアプローチを破っています。ここで私がやろうとしている簡単な例があります。BEM修飾子内のSCSSでgrand parentを選択する方法は?
これはHTML
<div class="icon-box icon-box--red">
<h3 class="icon-box__title>This is title</h3>
</div>
そしてSCSS
.icon-box {
&__title {
color: black;
}
&--red {
&__title {
color: red;
}
}
}
され、出力CSSが
.icon-box {
background: white;
}
.icon-box__title {
color: black;
}
.icon-box--red {
background: black;
}
.icon-box--red__title {
color: red;
}
コンパイルCSSが正しいですが、私はこの
を達成したいです.icon-box {
background: white;
}
.icon-box__title {
color: black;
}
.icon-box--red {
background: black;
}
.icon-box--red .icon-box__title {
color: red;
}
名前を.icon-box__titleで参照できますが、私は祖父母に戻ってみたいと思います。私が使用できるアプローチはありますか?
ありがとう
:ここ
はあなたのための2つのオプションがあります。上記の答えを正しいものとして受け入れるか、あなたのものを正しいものとして選択してください。 –