如何在BEM修改器內的SCSS上選擇祖父母？

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; 
    } 
    } 
} 

希望有人會發現它有用

Answer 2

使用符號只着眼於paticular風格父母因此爲什麼你的SASS正在編制這樣。

這裏有兩個選項：

.icon-box { 

     &__title { 

      color: black; 

     } 

     &--red { 

      color: red; 

     } 

     &__title { 

      color: red; 

     } 
    } 


    .icon-box { 

     &__title { 

      color: black; 

     } 

     &--red, &__title { 

      color: red; 

     } 
    }