Nice to have `&&` references parent's parent

I’m writing code where I want to store a component’s state as a bem modifier on the container. Right now I can’t use the new &--... nested with &-... to do so. Therefore I propose to add a double ampersand to reference the parent’s parent, and perhaps &(n) to continue upward traversal.

Example:

.Block {
  &-element { … }

  &--modifier {
    &&-element { … }
  }
}

would compile to

.Block-element { … }
.Block--modifier .Block-element { … }

[cimmanon]

Sass already offers the ability to do what you’re asking.

.Block {
  $p: &;
  &-element { /* */ }

  &--modifier {
    #{$p}-element { /* */ }
  }
}

Understanding the & is a difficult concept for a lot of people (a lot of novices mistakenly believe that it only references the previous level of nesting rather than the entire resolved selector). Adding a double ampersand would only further confuse novices.

Your second suggestion makes absolutely no sense and would be a backwards incompatible change for users who already use the parent selector in its current form.

[sbussard]

Apparently I misunderstood what & is used for. On the other hand it looks like the current behavior of sass is counterintuitive. If & references the root parent, then it seems like the intuitive behavior would be this:

.Block {
  &-element { … }
  &--modifier {
    &-element { … }
  }
}

would compile to:

.Block-element { … }
.Block--modifier .Block-element { … }

instead of the current:

.Block-element { … }
.Block--modifier-element { … }