嵌套选择器内的与号（父选择器）[重复]

Posted 2023-03-06

【中文标题】嵌套选择器内的与号（父选择器）[重复]

【英文标题】：Ampersand (parent selector) inside nested selectors [duplicate]

【发布时间】：2012-07-28 07:39:59

【问题描述】：

这不是记录在案还是不可能？

#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 有自己的子代，现在需要在两个规则中复制，这似乎会适得其反。

无论如何，也许我只是挑剔，但如果有更多的方法可以遍历选择器，那就太好了。

【参考方案1】：

虽然目前还不可能，但这个以及对& 语法的许多类似改进计划在 Sass 3.3 中发布。您可以关注 Sass 问题here 上有关该功能的讨论。

【参考方案2】：

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

【参考方案3】：

这在 v3.4 中可能会在 3.3 中，但不确定。 我不是语法的粉丝。 & 更容易。希望有像 &^ 这样的别名:)

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