SCSS / SASS-将BEM与SASS和归因一起使用

Question

I'm using BEM to name my class names, example: .accordion, .accordion__title, .accordion__item__content.

For that I created the following mixin:

@mixin child_el($element) {

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

It is working very well, but I have an issue when I need to add also attributes:

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

What I'm trying to achieve:

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

The parent is read as being &[state=true] instead of .accordion

Answer 1

You can rewrite this without the mixin:

.accordion {
  display: block;

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

The output CSS will be:

.accordion {
  display: block;
}

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