Skip to content

:not() selector can't be added directly to the BEM Block #399

Description

@desig9stein

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions