如何在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; 

     } 
    }