In some cases, we need to use the not selector directly on the block element, for example:
@include b(igx-step) {
// Maybe we can have one more mixin, for example 'nm' that stands for a negative modifier
// that resolves to the 'b' element followed by the negative modifier of the block element
// wrapped in the :not() selector in this case :not(igx-step--disabled)
@include nm($not: 'disabled') {
&:focus {
@include e(header) {
background: var-get($theme, 'step-focus-background');
color: var-get($theme, 'title-focus-color');
}
}
}
}
This should resolve to:
.igx-step:not(.igx-step--disabled):focus {
.igx-step__header {
...
}
}
This can reduce the amount of output code since doing it will eliminate the need for overrides
In some cases, we need to use the not selector directly on the block element, for example:
This should resolve to:
This can reduce the amount of output code since doing it will eliminate the need for overrides