sass - 使用＆符号时如何定位语法父级？

Question

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

.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而不是.row

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

Answer 1

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

有好消息

可以使用Stylus进行。我在 codepen 上创建了一个实时示例。

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

我希望这对您有所帮助，至少它可能会为您提供一个选择，但不幸的是 SASS 无法实现您的尝试。