在 Sass 中匹配多个 BEM 修改器

Question

我正在使用 BEM，并且有一个带有多个修饰符的元素：

<div class="block__element block__element--m1 block__element--m2"></div>

我正在使用 SCSS 并利用它来编写与 BEM 兼容的嵌套规则。如果我想编写一个元素（如上面）具有 both m1 和 m2 修饰符的规则，有没有办法编写与我当前编写它们的方式兼容的方法？这是我所追求的语法，但会导致语法错误：

.block {
    display: block;

    &__element {
        display: inline;

        &--m1 {
            background-color: red;
        }

        &--m2 {
            background-color: green;
        }

        // Syntax error
        &--m1&--m2 {
            background-color: yellow;
        }
    }
}

我可以想办法通过使用属性选择器来解决这个问题，但是有没有更简洁的方法？

作为记录，编译后的属性选择器应该是：

.block__element--m1.block__element--m2

Answer 1

@3rdthemagical 的回答确实给了我一些寻找更好解决方案的灵感。 Sass 根本不喜欢 & 出现在选择器开头之后，但它不介意将它包裹在 #{} 中：

.block {
    display: block;

    &__element {
        display: inline;

        &--m1 {
            background-color: red;
        }

        &--m2 {
            background-color: green;
        }

        // Correct!
        &--m1#{&}--m2 {
            background-color: yellow;
        }
    }
}

Answer 2

将选择器名称存储在变量中。萨斯迈斯特demo.

.block {
  $module: ".block";

  &__element {
    $this: "#{$module}__element";

    &--m1#{$this}--m2 {
        background-color: yellow;
    }
  }
}

生成的css：

.block__element--m1.block__element--m2 {
  background-color: yellow;
}