嵌套选择器中的“&"号(父选择器) [英] Ampersand (parent selector) inside nested selectors

问题描述

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

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.

这篇关于嵌套选择器中的“&"号(父选择器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！