About using & in nested selectors with BEM

In normal SCSS/SASS file code:

.calendar-container--theme-third {
  .calendar-reservation {
    &__checkout-wrapper:not(&--modifier):before {
      content: 'abc';
    }
  }
}

will be parsed to:

.calendar-container--theme-third .calendar-reservation__checkout-wrapper:not(.calendar-container--theme-third .calendar-reservation--modifier):before {
  content: 'abc';
}

so when U need to use ie. not with ampersand U will get the whole parent selector

:not(.calendar-container--theme-third .calendar-reservation--modifier)

instead of the last parent in & place

:not(.calendar-reservation--modifier)

For this situation, I created plugin/mixin: BEM-parent-selector

This mixin gives you an option to add selector only for the last parent.

.calendar-container--theme-second-2 {
  .calendar-reservation {
    @include BEM-parent-selector('&__checkout-wrapper:not(&--modifier):before') {
      content: 'abc';
    }
  }
}

will be parsed to:

.calendar-container--theme-second-2 .calendar-reservation__checkout-wrapper:not(.calendar-reservation--modifier):before {
   content: 'abc';
 }

Tweet