sass - SCSS：父添加类时修改子属性

Question

使用 SCSS 我想知道是否有任何更优雅的方式（使用&）来修改基于父级添加某个类的子级。

我发现的唯一方法是：CSS - modify parent based on first child

这是有效的（基于上面的答案）：

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

我想做的是这样的：

.parent {
  .child  {
    opacity: 0.5;

    collapsed& {
      opacity: 1.0;
    }
  }
}

有没有办法在 SCSS 中实现这一点？

标签： sass

Answer 1

是的，有一种方法可以在 scss 中做到这一点。使用 & 后跟一个没有空格的类名。检查下面的示例。

.parent {
  .child  {
    opacity: 0.5;
  }

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

}