Правило SASS (.scss), применяемое, когда есть оба вложенных класса

Question

Я использую SASS (.scss) для моего текущего проекта.

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. Иными словами, проще использовать утилиту интерполяции #{}, чтобы избежать конкатенации строк.

Таким образом, ответ будет таким же прямым, как этот:

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

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

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

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

Рабочая демоверсия

Answer 2

Вы можете использовать функции выбора:

@at-root #{selector-unify(selector-append(&, "--blue"), selector-append(&, "--yellow"))} {
   background-color: green;
}

Вероятно, лучше обернуть это в другой миксин, чтобы его было проще использовать:

@mixin both-colours($a, $b) {
   @at-root #{selector-unify(selector-append(&, "--#{$a}"), selector-append(&, "--#{$b}"))} {
      @content;
   }
}

используется как

@include both-colours(blue, yellow) {
   background-color: green;
}

Answer 3

Возможно рассмотрите возможность использования переменной, как показано ниже:

$c:'.colours';

#{$c} {
   width: 50px;
   height: 50px;

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

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

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