Nice to have && references parent's parent

[sbussard]

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 { … }

[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 { … }

[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]

Thank you! Glad to know there's a way.
I'm gonna close the issue @cimmanon, but do you think I should create an issue to make this a possibility?

%SomeDefaultComponentStyling {
  color: #333;

  &-element1 { font-weight: bold; }
  &-element2 { font-style: italic; }
}

.SomeBEMComponent {
  @extend %SomeDefaultComponentStyling;
}

compiling to:

.SomeBEMComponent {
  color: #333;
}

.SomeBEMComponent-element1 {
  font-weight: bold;
}

.SomeBEMComponent-element2 {
  font-style: italic;
}

[cimmanon]

That issue has already been raised (see: #1424)

[sbussard]

@cimmanon the only thing about that method is that if you use more than one selector (Ex .BlockA, .BlockB { ... }) it gets really jumbled