在 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

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

.block {
  $module: ".block";

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

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

生成css:

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

Answer 2

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

中

.block {
    display: block;

    &__element {
        display: inline;

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

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

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

在 Sass 中匹配多个 BEM 修饰符

Matching multiple BEM modifiers in Sass

css

sass

bem