在一个元素中嵌套多个类的SASS

假设我有以下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>

现在我想要一个既有红色又有黄色的儿子，背景是橙色。

---

我怎样才能用SASS写这篇文章呢？

一点SASS-Ampersand魔法就能让你达到目的

插值括号#{}需要作为两个接触的符号 是无效的Sass

---

[现场示例][

我编辑了父亲对父亲的对话，谢谢，这样你也可以编辑你的答案：）@TamarG我添加了一个工作示例，请参见

.parent {
  width: 100%;

   &__son {
     width: 20%;

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

.parent {
  width: 100%;

   &__son {
     width: 20%;

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