Как использовать родительский селектор scss, чтобы выбрать его двойной селектор

Question

Я пришел, бросил сценарий, в котором я хотел сослаться на мой родительский селектор в моем sass, позже я захотел добавить родительский селектор его двойной селектор animate, чтобы выполнить определенную анимацию при прокрутке.Есть ли способ, которым я могу достичь этого.Любая помощь будет оценена.Я знаю, это сложно объяснить мой вопрос.Надеюсь, что приведенный ниже пример объясняет мою потребность.

CSS

.parent--selector.animate .child-selector {
  opacity: 1;
}
.parent--selector .child--selector {
  opacity:0;
  transition: 0.3s;
}

Я хотел добиться вышеуказанных стилей, используя scss с шаблоном ниже

SCSS

.child--selector {
  opacity: 0;
  transition: 0.3s;
  .parent--selector & {
    &.animate {
      opacity: 1;
    }
  }
}

Answer 1

Псевдо SCSS там не совсем имеет смысла, поскольку это приведет к чему-то вроде:

.child--selector{
  opacity: 0;
  transition: 0.3s;
} 

.child--selector .parent--selector.animate{
 opacity: 1;
}

Вы не сможете иметь .child--selector в качестве родителя в SCSS, но ожидаете, что этобыть дочерним селектором в CSS, короче говоря, это было бы невозможно.

Я не совсем уверен, чего именно вы хотите достичь, но вы можете попробовать использовать что-то в SASS под названием @extend

Основная идея будет иметь родительский селектор вне .child-селектора, как это:

  .parent--selector & {
    &.animate {
      opacity: 1;
    }
  }

И затем ссылаться на него внутри дочернего селектора, как это

.child--selector {
  opacity: 0;
  transition: 0.3s;

  @extend .parent--selector;
}

Полезная статья, касающаяся @extend: https://css -tricks.com / the-exte-concept /

Вы можете добиться аналогичного результата, используя миксины: https://sass -lang.com / гид

Answer 2

Не совсем понятно, но, думаю, я правильно вас понял.

Правила должны быть написаны параллельно ...

.parent--selector {
  &.child--selector.animate {
    opacity: 1;
  }
  &.parent--selector {
    opacity: 0;
  }
}

Если вы покажете свой HTML, я скажу более точно,если конечно я ошибся в этом примере и не правильно понял ...