在 Sass 中匹配多个 BEM 修改器

Posted 2023-02-23

【中文标题】在 Sass 中匹配多个 BEM 修改器

【英文标题】：Matching multiple BEM modifiers in Sass

【发布时间】：2018-05-19 01:38:58

【问题描述】：

我正在使用 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

【参考方案1】：

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

.block 
    display: block;

    &__element 
        display: inline;

        &--m1 
            background-color: red;
        

        &--m2 
            background-color: green;
        

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

【讨论】：

不错的解决方案（如果阅读起来有点混乱）。感谢您指出这个方便的解决方法

当您必须在该元素中添加一些带有少量修饰符的内容时不起作用。 .a &--m1#&--m2 .b ... 转换为 .a .a--m1.a--m2 .b ...

聪明程度?！‎

【参考方案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;

【讨论】：

我希望 Sass 能提供比这更好的解决方案——不得不将选择器存储在变量中意味着我不得不重复自己，而 Sass 对我来说最大的卖点是它可以帮助我避免就是这样！

不过，您确实给了我正确答案的灵感！ ***.com/a/47653943/376683