Sass BEM:当元素在修饰符中时避免修饰符重复

Question

我可以以某种方式重构以下代码片段以摆脱双修饰符声明吗？

.block {
  &__element {
    rule: value;
  }
  &--modifier {
    rule: value;
  }
  &--modifier & {
    &__element {
      rule: value;
    }
  }
}

需要输出:

.block {
   property: value;
}
.block--modifier {
  property: value;
}
.block--modifier .block__element {
  property: value;
}

Answer 1

将元素嵌套在修饰符中是一个已知问题.有很多变通方法.

可变的方式

将块元素存储在变量中.

并在修改器中创建元素时使用它进行插值.

.block {
  $block: &;

  &__element {
    property: value;
  }

  &--modifier {
    property: value;
    #{$block}__element {
      property: value;
    }
  }
}

见下面的输出.

功能方式

1.创建一个返回块元素的函数.

它将获得父选择器并在之前剪切单词--(这是块).看起来很hacky,但这是最简单的方法.

@function block() {
  $selector: str-slice(inspect(&), 2, -2);
  $index: str-index($selector, '--') - 1;
  @return str-slice($selector, 0, $index);
}

2.使用插值函数.

这将返回块的名称,因此您不必重复它.

.block {
  property: value;

   &--modifier {
     property: value;
     #{block()}__element {
       property: value;
     }
   }
}

见下面的输出.

两种方式都将输出到:

.block {
  property: value;
}

.block--modifier {
  property: value;
}

.block--modifier .block__element {
  property: value;
}