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]

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

1 个答案: