SCSS: изменить свойство ребенка, когда родитель добавляет класс

Question

Использование SCSS Мне было интересно, есть ли более элегантный способ (с использованием &) изменить дочерний элемент на основе добавления родителем определенного класса.

Я нашел только один способ: CSS - изменить родительский элемент на основе первого потомка

Вот что работает (основываясь на ответе выше):

.parent {
  .child  {
    opacity: 0.5;
  }
}
.parent.certain-class {
  .child  {
    opacity: 1.0;
  }
}

Я бы хотел сделать что-то вроде этого:

.parent {
  .child  {
    opacity: 0.5;

    collapsed& {
      opacity: 1.0;
    }
  }
}

Есть ли способ достичь этого в SCSS?

Answer 1

Да, есть способ сделать это в scss.Использование & сопровождается именем класса без пробела.Проверьте пример ниже.

.parent {
  .child  {
    opacity: 0.5;
  }

&.certain-class {
  .child  {
    opacity: 1.0;
  }

}