Generated by SassMeister.com.

SassMeister-input-HTML.html

<section class="widget">
  <div class="widget__header">
    <h1>Header</h1>
  </div>
  <div class="widget__content">
    <li class="menu-header"><span class="icon"></span>test</li>
    <li class="parent"><span class="icon"></span>test</li>
    <li><span class="icon"></span>test</li>
    <li><span class="icon"></span>test</li>
    <li><span class="icon"></span>test</li>
  </div>
  
  <div class="widget__footer">
    footer
  </div>
</section>

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

/// Block Element
/// @access public
/// @param {String} $element - Element's name
@mixin element($element) {
    &__#{$element} {
        @content;
    }
}

/// Block Modifier
/// @access public
/// @param {String} $modifier - Modifier's name
@mixin modifier($modifier) {
    &--#{$modifier} {
        @content;
    }
}

//// BEM mixin usage
//.block {
//    /* CSS declarations for `.block` */
//
//    @include element('element') {
//        /* CSS declarations for `.block__element` */
//    }
//
//    @include modifier('modifier') {
//        /* CSS declarations for `.block--modifier` */
//
//        @include element('element') {
//            /* CSS declarations for `.block--modifier__element` */
//        }
//    }
//}

.widget {
  width: 80%;
  margin: 20px auto;
  color: #444;
  padding: 20px;
  background-color: #e8ebee;
  border-radius: 12px;
  

  @include element('header') {
      h1 {
        font-size: 36px;
      }
  }
  
  @include element('content') {
    color: grey;
  }
  
  @include element('footer') {
    background: blue;
    color: blue;
  }
}


/*
  comments will be compiled

*/

// comments not be compiled


li {
    background-color: pink;
    margin: 0 0 10px;
    padding: 20px;
    
    .icon {
        &:before {
          content: 'xxxxxx';
        }
        &.icon--arrow-left {
            margin: 0 15px 0 20px;
            //visibility: visible;
        }
    }
    

    &:not(.parent) {
        .icon:before {
            content: 'aaaa';
        }
    }
    
    // &:not(:first-child) {
    //     .icon:before {
    //         content: 'bbbb';
    //     }
    // }
}

SassMeister-output.css

.widget {
  width: 80%;
  margin: 20px auto;
  color: #444;
  padding: 20px;
  background-color: #e8ebee;
  border-radius: 12px;
}

.widget__header h1 {
  font-size: 36px;
}

.widget__content {
  color: grey;
}

.widget__footer {
  background: blue;
  color: blue;
}

/*
  comments will be compiled

*/
li {
  background-color: pink;
  margin: 0 0 10px;
  padding: 20px;
}

li .icon:before {
  content: 'xxxxxx';
}

li .icon.icon--arrow-left {
  margin: 0 15px 0 20px;
}

li:not(.parent) .icon:before {
  content: 'aaaa';
}

SassMeister-rendered.html

<section class="widget">
  <div class="widget__header">
    <h1>Header</h1>
  </div>
  <div class="widget__content">
    <li class="menu-header"><span class="icon"></span>test</li>
    <li class="parent"><span class="icon"></span>test</li>
    <li><span class="icon"></span>test</li>
    <li><span class="icon"></span>test</li>
    <li><span class="icon"></span>test</li>
  </div>
  
  <div class="widget__footer">
    footer
  </div>
</section>