BEM-parent-selector

SASS / SCSS mixin for adding selectors into parent using & and without duplicating selectors before parent

Example

In normal SCSS/SASS file code:

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

will be parsed to:

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

so when U need to use ie. not with ampersand U will get the whole parent selector instead of the last parent in & place.

.calendar-container--theme-third .calendar-reservation__checkout-wrapper:not(.calendar-container--theme-third .calendar-reservation--modyfikator):before

This mixin give 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(&--modyfikator)') {
      content: 'abc';
    }
  }
}

will be parsed to:

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

other example with many selectors:

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

will be parsed to:

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