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问题here的功能的讨论进行讨论。

Answer 2

我同意这会非常有帮助。不幸的是，目前SASS（或我所知道的任何其他CSS预处理器）都无法实现。

Answer 3

v3.4中的功能可能在3.3但不确定。我不是语法的粉丝。＆安培;更容易。希望有一个像＆amp; ^这样的别名：）

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

嵌套选择器中的＆符号（父选择器）

3 个答案: