SASS (.scss) rule to apply when has both nested classes

Question

I'm using SASS (.scss) for my current project.

HTML

<div class="colours colours--blue">
  <!-- This should be blue -->
</div>

<div class="colours colours--yellow">
  <!-- This should be yellow -->
</div>

<div class="colours colours--blue colours--yellow">
  <!-- This should be green -->
</div>

SCSS

.colours {
   width: 50px;
   height: 50px;

   &--blue {
      background-color: blue;
   }

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

   &--blue (AND) &--yellow { /* <<< HOW TO CREATE THIS SELECTOR? */
      background-color: green;
   }
}

Answer 1

请记住，这些&行为几乎就像Sass中的占位符。这样，仅使用插值util #{}来避免字符串连接就容易了。

因此，答案将是这样直接：

.colours {
   width: 50px;
   height: 50px;

   &--blue {
      background-color: blue;
   }

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

   &--blue#{&}--yellow {
      background-color: green;
   }
}

工作演示