Generated by SassMeister.com.

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// unnest for BEM--------------------------------
.sidebar
  color: red  
  @at-root #{&}__categories
    color: blue
  
  @at-root #{&}__tags
    color: green
    @at-root #{&}--selected
      background: black
      

// unnest elements from MQ --------------------------------
@media screen and (max-width: 320px)
  .sidebar
    width: 50%
    @at-root (without: media screen) 
      color: red
      

// Mixins for BEM--------------------------------
@mixin e($name)
  @at-root #{&}__#{$name}
    @content

@mixin m($name)
  @at-root #{&}--#{$name}
    @content
    
    
.header
  +e(avatar)
    color: red
    +m(rounded)
      color: green

SassMeister-output.css

.sidebar {
  color: red;
}
.sidebar__categories {
  color: blue;
}
.sidebar__tags {
  color: green;
}
.sidebar__tags--selected {
  background: black;
}

@media screen and (max-width: 320px) {
  .sidebar {
    width: 50%;
  }
}
.sidebar {
  color: red;
}

.header__avatar {
  color: red;
}
.header__avatar--rounded {
  color: green;
}