bem mixins

input.sass

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

=bem($bem-block)
  $bem-block: $bem-block !global
  @content

=el($element, $before: "", $after: "", $mod: "")
  $direct-parent: ""
  @if str-length($mod) > 0
    $mod: "--#{$mod}"
  
  // if we need styles based on the parent, just grab the direct parent
  @if str-length($before) > 0
    $direct-parent: nth(nth(&, 1), -1)
  @at-root #{$direct-parent} #{$before} .#{$bem-block}__#{$element}#{$mod}#{$after}
    @content

+bem(accordion)
  +el(container)
    border: 1px solid grey
    width: 50%
    margin: auto
    padding: 1em
    // when just using before, you can just pass it as the first argument
    +el(header)
      background-color: yellow
      //if need to us `$after` without `$before`, you need to pass the key/value

    +el(content)
      background-color: grey
      color: yellow
      // to use both, you can use key/values foe clarity...
      +el(container, $before: ">", $after: ":hover")
        transition-duration: 0.5s
        text-indent: 5em
        color: white
      
      +el(container)
        // or just use values
        +el(doop)
          float: right
          display: inline-block
        +el(doop, ">", ":hover")
          transition-duration: 0.5s
          font-size: 2em

  +el(header)
    // unfortunetely i couldn't find a way to support using normal '&' usage
    // you have to use `$after`
    // there may be some fancy way to do it, but for now, you have to pass an empty string to `$before`
    &:first-child  
      +el(child, ' ')
        color: red


+bem(accordions)
  +el(container)
    border: 1em solid black
    +el(header)
      background: red

  +el(container, $mod: active)
    border: 1em solid red
    +el(header, $before: ">", $after:":hover")
      background: blue

markup

.accordion__container
  .accordion__header Headear
  .accordion__content
    .accordion__container
      Content
      .accordion__doop DOOP!

output.css

.accordion__container {
  border: 1px solid grey;
  width: 50%;
  margin: auto;
  padding: 1em;
}
.accordion__header {
  background-color: yellow;
}
.accordion__content {
  background-color: grey;
  color: yellow;
}
.accordion__content > .accordion__container:hover {
  transition-duration: 0.5s;
  text-indent: 5em;
  color: white;
}
.accordion__doop {
  float: right;
  display: inline-block;
}
.accordion__container > .accordion__doop:hover {
  transition-duration: 0.5s;
  font-size: 2em;
}
.accordion__header:first-child .accordion__child {
  color: red;
}
.accordions__container {
  border: 1em solid black;
}
.accordions__header {
  background: red;
}
.accordions__container--active {
  border: 1em solid red;
}
.accordions__container--active > .accordions__header:hover {
  background: blue;
}

rendered.html

<div class='accordion__container'>
  <div class='accordion__header'>Headear</div>
  <div class='accordion__content'>
    <div class='accordion__container'>
      Content
      <div class='accordion__doop'>DOOP!</div>
    </div>
  </div>
</div>