SCSS/SASS - Verwenden von BEM mit SASS und Attributen

Question

Ich verwende BEM, um meine Klassennamen zu benennen, zB: .accordion, .accordion__title, .accordion__item__content.

Dafür habe ich geschaffen, um die folgende mixin:

@mixin child_el($element) { 

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

Es ist sehr gut arbeiten, aber ich habe ein Problem, wenn ich auch hinzufügen müssen Attribute:

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

Was ich versuche zu erreichen:

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

Die Eltern wird als & [state = true] anstelle von .acc lesen ordion

Answer 1

Sie können dies umschreiben ohne mixin:

.accordion { 
    display: block; 

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

Der Ausgang CSS wird:

.accordion { 
    display: block; 
} 

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