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