css - 嵌套选择器内的与号（父选择器）

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 预处理器）中是不可能的。

Answer 3

This is capable in v3.4 might be in 3.3 but not sure. I am not a fan of the syntax though. & is much easier. Wish there was something like &^ for an alias :)

#parent {
    #child {
        width: 75%;
        @at-root #{selector-replace(&, '#parent', '#parent.additional_parent_class')} {
            width: 50%;
        }  
    }
}