Comment sélectionner grand parent sur SCSS dans le modificateur BEM?

Question

Pendant que j'essayais BEM et SCSS. Utiliser SCSS pour sélectionner le modificateur et les éléments est facile, mais la partie la plus difficile consiste à utiliser un modificateur et un élément de référence qui n'a pas de classe modif. Voici l'exemple rapide de ce que j'essaie de faire.

C'est le HTML

<div class="icon-box icon-box--red"> 
    <h3 class="icon-box__title>This is title</h3> 
</div> 

Et le SCSS

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

    &--red { 
    &__title { 
     color: red; 
    } 
    } 
} 

Et le css de sortie est

.icon-box { 
    background: white; 
} 
.icon-box__title { 
    color: black; 
} 
.icon-box--red { 
    background: black; 
} 
.icon-box--red__title { 
    color: red; 
} 

Le CSS compilé est correct mais je veux atteindre cet objectif

.icon-box { 
    background: white; 
} 
.icon-box__title { 
    color: black; 
} 
.icon-box--red { 
    background: black; 
} 
.icon-box--red .icon-box__title { 
    color: red; 
} 

Alors que je peux le référencer en utilisant le nom de fichier .icon-box__title mais je veux revenir à grand parent. Y a-t-il une approche que je peux utiliser?

Merci

Answer 1

Enfin, je pensais beaucoup et trouvé un moyen de contourner ne sais pas pourquoi il n'y a pas un moyen de contourner pour sélectionner les grands-parents sur SCSS.

Voici comment je fais que

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

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

quelqu'un Hope trouver UTILE

Answer 2

En utilisant l'esperluette ne regarde que ce parent de styles paticular donc pourquoi votre SASS compile comme ça.

Voici deux options pour vous:

.icon-box { 

     &__title { 

      color: black; 

     } 

     &--red { 

      color: red; 

     } 

     &__title { 

      color: red; 

     } 
    } 


    .icon-box { 

     &__title { 

      color: black; 

     } 

     &--red, &__title { 

      color: red; 

     } 
    }