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

【问题标题】：How can I target the syntactical parent when using the ampersand?使用＆符号时如何定位语法父级？
【发布时间】：2016-10-20 21:12:47
【问题描述】：

我正在尝试删除我的 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

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

【问题讨论】：

预期输出是什么？
@Mr_Green 预期输出是第一个 sass 示例的结果（这是一个有效示例）
@WillemD'Haeseleer 既然我明白了你的问题，我在下面修改了我的答案，希望对你有所帮助:)

标签： sass css-selectors libsass

【解决方案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 无法实现您的尝试。

【讨论】：

对不起，我不确定你的意思。我的第一个 scss 示例是有效的 scss，因此编译后的输出是预期的输出。我只是想写它而不必复制 .row 选择器
好的，所以我重新查看了我的结果和您的第一个示例的结果，它们是不同的。我在 CSS 输出之后能够对其进行确认和测试，以确保我可以复制结果。我的结果与 CSS 输出不同。没有任何进一步的信息，我真的无能为力，抱歉。
谢谢，感谢您的努力，但是在手写笔中，建议的解决方案比原始解决方案更复杂，这有点违背目的。