嵌套选择器中的&符号(父选择器)

Question

这是没有记录还是不可能？

#parent {
  #child {
    width: 75%;

    .additional_parent_class & {
      width: 50%;
    }
  }
}

这基本上会变成:

.additional_parent_class #parent #child {
  width: 50%;
}

虽然这是有道理的,因为&符号的实现及其使用方式.如果我想要实现这一点怎么办？

#parent.additional_parent_class #child {
  width: 50%;
}

我能够实现这一目标的唯一方法是在子声明之外编写另一条规则:

#parent{
  #child {
    width: 75%;
  }

  &.additional_parent_class #child {
    width: 50%;
  }
}

虽然这不一定是这个实现中的"痛苦",但如果#child有自己的孩子,现在需要在两个规则中重复,这似乎会产生反作用.

无论如何,也许我只是挑剔,但如果有更多方法可以遍历选择器,那将会很棒.

Answer 1

虽然目前还不可能,但是对于&语法的这种和许多类似的改进都将在Sass 3.3中发布.您可以在此处关注有关Sass问题的功能的讨论.

Answer 2

我同意这会很有帮助。不幸的是，目前在 SASS（或我所知道的任何其他 CSS 预处理器）中这是不可能的。