如何使用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

不太清楚，但我想我正确理解了你。

规则必须并行编写...

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

如果您显示html，我会说得更准确，如果我在此示例中弄错了并且听不懂...

Answer 2

那里的伪SCSS不太有意义，因为这会产生类似以下内容：

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

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

您无法将.child--selector作为SCSS的父级，但希望它成为CSS中的子级选择器，总之，这是不可能的。

我不确定您到底想实现什么，但是您可以尝试在SASS中使用名为@extend的东西

基本思想是像这样的.child--selector之外的父选择器：

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

然后在子级内部选择它-像这样的选择器

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

  @extend .parent--selector;
}

有关@extend的有用文章： https://css-tricks.com/the-extend-concept/

您可以使用mixins获得类似的结果： https://sass-lang.com/guide