TWL-Lab49/Controlling scope in nested Sass selectors.

scope.md

There's a few tricks that you can use to control scope when nesting Sass selectors. The best use case I've been able to find is when you're writing selectors with BEM.

.block {
  $this: &; // <-- Here's the trick.
  
  &--modified {
    #{$this}__nested-block {
      some: style;
    }
  }
}

...which will compile to:

.block--modified .block__nested-block { some: style; }

If you had instead written this as:

.block {  
  &--modified {
    &__nested-block {
      some: style;
    }
  }
}

...you would end up with:

.block--modified__nested-block { some: style; }

which is probably not what you intended.