在使用＆符号时，如何定位语法父项？

Question

我正在尝试删除我的scss选择器中的一些重复。

 path: 'abc',
 component: AbcComponent,
 canActivate: [CanActivateViaAuthGuard]

我试着像这样重写：

.container {
  .operation {
    color: green;
  }
  .row.is-active &,
  .row:hover & {
    .operation {
      color: inherit;
    }
  }
}

但是，这会导致.container { .operation { color: green; } .row & { &.is-active, &:hover { .operation { color: inherit; } } } } 应用于.is-active而不是.container

使用＆符号时如何定位语法父项？

Answer 1

我花了一些时间再次回答这个问题，因为我最初误解了它。不幸的是，目前在SASS绝对没有可能做到这一点。即使尝试使用更高级的SASS functions来操纵选择器和字符串，也是不可能的。

有一些好消息

可以使用Stylus。 我在codepen上创建了一个实时Example。

  // Stylus - not SASS
  .container {
    .operation {
      color: green;
    }
    .row {
      ^[-1..-1]:is-active ^[0], ^[-1..-1]:hover ^[0] {
        .operation {
          color: inherit;
        }
      }
    }
  }

我希望这会以某种方式帮助你，至少它可能会为你提供一个选项，但不幸的是SASS无法实现你的目标。