Currently, I am implementing BEM and have a specific element with multiple modifiers:
<div class="block__element block__element--m1 block__element--m2"></div>
In my project, SCSS is utilized to write nested rules that are in line with BEM conventions. If I aim to define a rule where an element (similar to the one above) possesses both the m1 and m2 modifiers, is there a method to achieve this while maintaining compatibility with my current approach? Below is the desired syntax which leads to a syntax error:
.block {
display: block;
&__element {
display: inline;
&--m1 {
background-color: red;
}
&--m2 {
background-color: green;
}
// Syntax error
&--m1&--m2 {
background-color: yellow;
}
}
}
Although attribute selectors can be used as a workaround, is there a more elegant solution?
Just to clarify, the compiled attribute selector should appear as follows:
.block__element--m1.block__element--m2