嵌套选择器内的与号(父选择器)

2022-01-10 00:00:00 css-selectors css sass

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

Is this not documented or just not possible?

#parent {
  #child {
    width: 75%;

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

这基本上会变成:

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

虽然这很有意义，因为与符号的实现及其使用方式有关.如果我试图让它实现这一点怎么办:

While this makes sense because of the implementation of the ampersand and how it's used. What if I'm trying to get it to achieve this:

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

我能够做到这一点的唯一方法是在子声明之外编写另一条规则:

The only way I have been able to achieve this is by writing another rule outside of the child declarations:

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

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

虽然在此实现中这不一定是麻烦事"，但如果#child 有自己的子项现在需要在两个规则中复制，这似乎会适得其反.

While this isn't necessarily a 'pain in the butt' in this implementation, it seems counter productive if #child has children of its own that will now need to be duplicated in both rules.

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

Anyway, maybe I'm just being picky, but it would be great if there were more ways to traverse through the selectors.

推荐答案

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

Although it is not currently possible, this and many similar improvements to the & syntax are slated for release in Sass 3.3. You can follow the discussion about the feature on the Sass issue here.

相关文章