BEM修飾子内のSCSSでgrand parentを選択する方法は？

Question

私はBEMとSCSSを試みている間に。 SCSSを使ってモディファイアとエレメントを選択するのは簡単ですが、モディファイアを使用している間に難しい部分があります。モディファイアクラスを持たない参照エレメントは、私が作成したきちんとしたアプローチを破っています。ここで私がやろうとしている簡単な例があります。

これは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で参照できますが、私は祖父母に戻ってみたいと思います。私が使用できるアプローチはありますか？

ありがとう

Answer 1

は最後に、私は多くのことを考えて、SCSSで祖父母を選択する方法の周りに存在しない理由を確実な方法の周りが見つかりません。ここで

ホープ

.icon-box { 
    &__title { 
    color: black; 
    } 

    &--red { 
    .icon-box { 
     &__title { 
     color: red; 
    } 
    } 
} 

ことを私がやっている方法です誰かがそれはあなたのSASSはそのようにコンパイルされている理由だけので、そのpaticularスタイルの親を見てアンパサンドを使用して

Answer 2

を便利でしょう。これは非常に近い上記の回答と同じです

.icon-box { 

     &__title { 

      color: black; 

     } 

     &--red { 

      color: red; 

     } 

     &__title { 

      color: red; 

     } 
    } 


    .icon-box { 

     &__title { 

      color: black; 

     } 

     &--red, &__title { 

      color: red; 

     } 
    }