Scss селектор для двух классов на одном предмете

Question

Есть фрагмент кода:

.number__icon-container {
   display: flex;
   align-items: center;
   border-bottom: 1px solid;
   padding-left: 8rem;
   border-color: black.

   &_error  {
      border-color: red;
   }
}

Если есть какой-то div с классом number__icon-container_error, он будет иметь красный цвет границы, но это не хорошо для меня.Мне нужно установить красный цвет границы для div, если он одновременно имеет классы number__icon-container_error и number__icon-container_focus.Как мне это сделать?Спасибо!

Answer 1

Вы хотите получить селектор: .number__icon-container_error.number__icon-container_focus начиная с этого класса .number__icon-container.

Вам нужна интерполяционная скобка #{}, потому что два соприкасающихся амперсанданедействительны в Sass . Вот статья на css-tricks.com .

Вы можете написать:

  .number__icon-container {
    border-color: black;
      &_error#{&}_focus  { // See the use of the interpolation bracket ?
      border-color: red;
    }
  }

Будет скомпилировано:

.number__icon-container {
  border-color: black;
}
.number__icon-container_error.number__icon-container_focus {
  border-color: red;
}