Generated by SassMeister.com.

SassMeister-input.scss

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

$bem: (
  namespace: "-",
  modifier: "--",
  descendent: "__"
);

@mixin component($component, $namespace: "") {
  @if $namespace != "" {
    .#{$namespace}#{map-get($bem, namespace)}#{$component} {
      @content;
    }
  } @else {
    .#{$component} {
      @content;
    }
  }
}

@mixin modifier($modifier) {
  &#{map-get($bem, modifier)}#{$modifier} {
    @content;
  }  
}

@mixin descendent($descendent) {
  &#{map-get($bem, descendent)}#{$descendent} {
    @content;
  }
}

@mixin when($state) {
  &.is-#{$state} {
    @content;
  }
}

@mixin has($state) {
  &.has-#{$state} {
    @content;
  }
}


@include component(sidebar, admin) {
  background-color: #ccc;
  
  @include modifier(warning) {
    background-color: yellow;
  }
  
  @include descendent(title) {
    font-size: 2em;
  }
  
  @include descendent(button) {
    background-color: black;
    
    @include when(valid) {
      background-color: green;
    }
    
    @include has(header) {
      margin-bottom: 10px;
    }
  }
}

SassMeister-output.css

.admin-sidebar {
  background-color: #ccc;
}
.admin-sidebar--warning {
  background-color: yellow;
}
.admin-sidebar__title {
  font-size: 2em;
}
.admin-sidebar__button {
  background-color: black;
}
.admin-sidebar__button.is-valid {
  background-color: green;
}
.admin-sidebar__button.has-header {
  margin-bottom: 10px;
}