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]