SCSS / SASS - 使用带有SASS的BEM并使用

Question

我正在使用BEM来命名我的班级名称，例如：.accordion，.accordion__title，.accordion__item__content。

为此，我创建了以下mixin：

@mixin child_el($element) {

        &__#{$element} {
        @content;
      }
    }

它工作得很好，但是当我需要添加属性时我遇到了问题：

.accordion {
  display: block;
  @include child_el(item) {
    &[state=true] {
    @include child_el(content) {
      display: block;
    }
  }
}
}

我想要实现的目标：

.accordion[state=true] .accordion__item {
 display: block;
}

父母被视为＆amp; [state = true]而不是.accordion

Answer 1

你可以在没有mixin的情况下重写它：

.accordion {
  display: block;

  &[state=true] &__item {
    display: block;
  }
}

输出CSS将是：

.accordion {
  display: block;
}

.accordion[state=true] .accordion__item {
  display: block;
}