sassbem

Multiple BEM elements and modifiers in Sass


I am using BEM with multiple elements and modifiers but different blocks.

.header__column--6
    width: 50%

.footer__column--6
    width: 50%

Is there a way to address the elements and modifiers globally in Sass? The following example results in an error.

*
    &__column--6
        width: 50%

Of course there would be the possibility to use global grid__column--6 instead of naming each block individually.

However, in my project i am dependent on defining these different blocks.


Solution

  • Try this attribute selector:

    [class$='__column--6']
      width: 50%