SASS, вложение нескольких классов в один элемент

Question

Допустим, у меня есть этот HTML-код:

<div class="parent">
   <div class="parent__son parent__son--red"></div>
   <div class="parent__son parent__son--yellow"></div>
   <div class="parent__son parent__son--red parent__son--yellow" ></div>
</div>

У родителя 3 сына: первый с красным, второй с желтым, третий с обоими.

Теперь я хочу сделать вложение SCSS:

.parent {
  width: 100%;

   &__son {
     width: 20%;

     &--red {
       background: red;
     }
     &--yellow {
       background: yellow;
     }
   }
}

Теперь я хочу, чтобы у сына с красным и желтым будет фоновый оранжевый. Как я могу написать это в SASS?

Answer 1

Немного магии Sass Ampersand доставит вас туда.

Интерполяционные скобки # {} нужны как два соприкасающихся амперсанда недействительны Sass

.parent {
  width: 100%;

   &__son {
     width: 20%;

     &--red {
       background: red;
     }
     &--yellow {
       background: yellow;
     }
     &--yellow#{&}--red { 
        background: orange; 
     }
   }
}

[Живой пример] [https://codepen.io/anon/pen/LMazWK]