Ampersand (parent selector) inside nested selectors [duplicate]

Question

Is this not documented or just not possible?

#parent {
  #child {
    width: 75%;

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

This will basically turn into:

.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%;
  }
}

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.

Answer 1

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.

Answer 2

I agree it would be very helpful. Unfortunately, it's not currently possible in SASS (or any other CSS preprocessor I know of).